// stylelint-disable selector-class-pattern, no-descending-specificity
// ===
// Alert
// ===
.el-alert {
  &.isStyleBase {
    align-items: flex-start;
    padding: 1rem 1.5rem;
    font-size: 0.75rem;
    line-height: 1.75;
    border-radius: 10px;
    backdrop-filter: blur(15px);

    &.el-alert--error {
      background: rgba($color-danger, 0.06);
    }

    .el-alert__icon {
      position: relative;
      top: 1px;

      &::before {
        font-family: $font-fontello;
        content: $fontello-attention;
      }
    }

    .el-alert__content {
      padding-left: 0.75rem;
    }

    .el-alert__closebtn {
      font-size: 1.125rem;
      line-height: 1.75rem;
    }
  }
}

// ===
// Breadcrumb
// ===
.el-breadcrumb {
  &.isStyleBase {
    @include unstyled;
  }
}

// ===
// Checkbox
// ===
.el-checkbox {
  &.isStyleBase {
    .el-checkbox__label {
      font-size: 1rem;

      @include max-md {
        font-size: 0.875rem;
      }
    }

    .el-checkbox__inner {
      width: 20px;
      height: 20px;
      border-width: 2px;
      border-radius: 4px;

      &::after {
        left: 1.5px;
        font-family: $font-awesome;
        font-size: 14px;
        font-weight: 600;
        color: #FFF;
        content: "\F00C";
        border: unset;
        transform: unset !important;
      }
    }

    .el-checkbox__input {
      top: -1px;
    }
  }
  &.isStyleCheckout {
    display: flex;
    align-items: center;

    .el-checkbox__label {
      font-size: 1.25rem !important;
      font-weight: 600;
      line-height: 1.5 !important;
      color: $color-blue-dark;

      @include max-md {
        font-size: 1rem !important;
      }
    }

    .el-checkbox__inner {
      width: 24px !important;
      height: 24px !important;
      border-width: 2px !important;
      border-radius: 4px !important;

      &::after {
        top: 3px;
        left: 2.5px !important;
        font-family: $font-awesome;
        font-size: 14px;
        font-weight: 600;
        color: #FFF;
        content: "\F00C";
        border: unset;
        transform: unset !important;
      }
    }

    .el-checkbox__input {
      top: 1px !important;
    }
    &.isUsePrepaid {
      padding: 2.125rem 1.5rem;
      border: 1px solid $color-line-2;
      .el-checkbox__label {
        font-weight: 400;
        font-size: 1rem !important;
      }
      .el-checkbox__input {
        .el-checkbox__inner {
          border-width: 1px !important;
          width: 20px !important;
          height: 20px !important;
        }
        &.is-checked {
          .el-checkbox__inner {
            background-color: transparent;
            &:after {
              font-family: unset;
              width: 12px;
              height: 12px;
              content: '';
              background: $color-primary;
              top: 3px;
              left: 3px !important;
            }
          }
        }
      }
      &.isStyleDingBeauty {
        .el-checkbox__inner {
          border-radius: 0 !important;
        }
      }
    }
  }

  .el-checkbox__input.is-checked + .el-checkbox__label {
    color: $color-blue-dark;
  }
  &.isStyleDingBeauty {
    .el-checkbox__inner {
      border-radius: 0;
    }
  }
}

// ===
// Dialog
// ===
%elDialogBase {
  border: unset;
  box-shadow: 2px 8px 36px #1C2C5414;

  @include max-md {
    width: 90% !important;
    margin-right: 5% !important;
    margin-left: 5% !important;
  }

  .el-dialog__body {
    padding: 3.75rem 1.875rem;

    @include max-md {
      padding: 2rem 1rem;
    }
  }

  .el-dialog__close {
    font-size: 2rem;
    color: $color-gray-3;
    transition: color 0.3s;

    &:hover {
      color: $color-primary;
    }
  }

  .el-dialog__headerbtn {
    &:focus {
      outline: none;
    }
  }

  .el-dialog__header {
    padding: 0;
  }
}

.el-dialog__wrapper {
  @include max-md {
    // padding-right: $container-gap;
    // padding-left: $container-gap;
  }
}

.el-dialog {
  @include max-md {
    width: 100% !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  &.isStyleBase {
    max-width: 900px !important;

    @extend %elDialogBase;

    @include max-md {
      margin-top: 3vh !important;
    }
  }

  &.isStyleLogin {
    @extend %elDialogBase;

    &.isStep1 {
      @include unstyled;
    }

    &.isStep2 {
      .el-dialog__header {
        display: none;
      }
    }
  }

  &.isStyleFull {
    margin: 0 !important;
    overflow: scroll;
    border-radius: 0;

    @include var-height(100);

    @include max-md {
      width: 100% !important;
      margin-right: 0 !important;
      margin-left: 0 !important;
    }

    @extend %elDialogBase;

    .el-dialog__wrapper {
      @include max-md {
        padding-right: 0;
        padding-left: 0;
      }
    }
  }
}

// ===
// Date Picker
// ===
div.el-date-picker {
  @include max-sm {
    width: calc(100vw - 76px);

    .el-picker-panel__content {
      width: calc(100% - 30px);
    }
  }

  .el-date-table td.disabled div {
    background: transparent;
  }

  .el-date-table th {
    text-align: center;
  }
  &.isStyleSquare {
    td.current {
      span {
        border-radius: 0;
      }
    }
  }
  // .el-date-table .el-date-table__row {
  //   .prev-month {
  //     visibility: hidden
  //   }
  //   .next-month {
  //     visibility: hidden;
  //   }
  // }
}
div.el-date-editor {
  &.isStyleFilter {
    min-width: 174px;

    @include max-lg {
      width: 140px;
      min-width: auto;
    }

    @include max-md {
      width: 100%;
      margin-bottom: 0.8rem;
    }

    .el-input__inner {
      height: 54px;
      padding-left: 3rem;
      font-size: 1rem;
      letter-spacing: 0.15em;
      background: transparent;
      border-radius: 0px;

      @include max-lg {
        height: 40px;
        font-size: 0.75rem;
      }
    }

    .el-input__prefix {
      font-size: 16px;
      left: 15px;
    }

    &:hover {
      .el-input__inner {
        border-color: $color-primary;
      }
    }
    &.isStyleDingBeauty {
      &.isUnderLine {
        .el-input__inner {
          background-color: transparent;
          background: transparent;
          border-width: 0 0 1px 0;
          border-radius: 0;
        }
      }
    }
  }
}

// ===
// Dropdown
// ===
div.el-dropdown {
  font-size: 1rem;

  @include max-lg {
    font-size: 0.875rem;
  }

  &.isStyleDropdownMenu {
    width: 100%;
    padding: 1rem 0;
    font-family: $font-serif;
    font-weight: 600;
    color: $color-primary-dark;
    text-align: center;
    background: #fff;
    box-shadow: 0 3px 20px #1c2c5414;
  }
}

// ===
// Form
// ===
.el-form {
  .el-form-item {
    .el-form-item__label {
      text-align: left;
    }
    &.isRequired {
      .el-form-item__label {
        width: 100%;
        color: $color-gray-2;
        &::after {
          position: absolute;
          margin-top: -3px;
          font-size: 1.25rem;
          color: $color-danger;
          content: '*';
        }
      }
      .el-select {
        width: 100%;
      }
    }

    &__error {
      line-height: 1.5;
    }
  }

  &.isStyleReservation {
    .el-date-editor {
      position: relative;

      .el-input__inner {
        &:focus {
          ~ .el-input__suffix {
            transform: rotate(0deg);
          }
        }
      }

      .el-input__suffix {
        width: 25px;
        transition: transform 0.3s;
        transform: rotate(180deg);

        &::before {
          position: relative;
          top: 2px;
          right: 0;
          font-family: $font-awesome;
          font-size: 1.125rem;
          color: $color-gray-3;
          content: '\f077';
          transform-origin: center;
        }
      }
    }

    .el-select, .el-date-editor {
      width: 100%;

      .el-input__inner {
        padding: 0;
        padding-right: 2rem;
        font-size: 1rem;
        letter-spacing: 0.15em;
        cursor: pointer;
        background: transparent;
        border: unset;
        border-bottom: 1px solid #CECECE;
        border-radius: 0;
      }

      .el-select__caret {
        &::before {
          position: relative;
          top: 2px;
          font-family: $font-awesome;
          font-size: 1.125rem;
          color: $color-gray-3;
          content: '\f077';
        }
      }

      .el-input__prefix {
        cursor: pointer;
      }

      .el-input__suffix {
        right: -4px;
      }

      &:hover {
        .el-input__inner {
          border-bottom-color: $color-primary;
        }
      }
    }

    .el-form-item__label {
      padding-bottom: 0;
      margin-bottom: 0;
      font-size: 0.75rem;
      line-height: 1.5;
      color: $color-gray-2;

      @include max-sm {
        margin-bottom: -0.5rem;
      }
    }

    .el-checkbox {
      .el-checkbox__label {
        font-size: 1rem;
      }

      .el-checkbox__inner {
        width: 20px;
        height: 20px;
        border-width: 2px;
        border-radius: 4px;

        &::after {
          left: 1.5px;
          font-family: $font-awesome;
          font-size: 14px;
          font-weight: 600;
          color: #FFF;
          content: "\F00C";
          border: unset;
          transform: unset;
        }
      }

      .el-checkbox__input {
        top: -1px;
      }
    }
  }

  /*
   &.isStyleBase {

    .el-select, .el-date-editor {
      width: 100%;

      .el-input__inner {
        height: 54px;
        padding-right: 2rem;
        padding-left: 1rem;
        font-size: 0.875rem;
        letter-spacing: 0.15em;
        cursor: pointer;
        border: 1px solid $color-line;
        border-radius: 0;
        transition: border 0.3s;

        &:hover {
          border-color: $color-primary;
        }
      }

      .el-select__caret {
        &::before {
          position: relative;
          top: 1px;
          font-family: $font-awesome;
          font-size: 0.875rem;
          font-weight: 400;
          color: $color-gray-3;
          content: '\f077';
        }
      }

      .el-input__prefix {
        cursor: pointer;
      }

      .el-input__suffix {
        right: 7px;
      }

      &:hover {
        .el-input__inner {
          border-color: $color-primary;
        }
      }
    }

    .el-form-item__label {
      width: 100%;
      padding-bottom: 0;
      padding-bottom: 0;
      margin-bottom: 0.5rem;
      font-size: 0.75rem;
      line-height: 1.5;
      color: $color-gray-2;
    }

    .el-checkbox {
      .el-checkbox__label {
        font-size: 0.875rem;
      }

      .el-checkbox__inner {
        width: 20px;
        height: 20px;
        border-width: 2px;
        border-radius: 4px;

        &::after {
          left: 1.5px;
          font-family: $font-awesome;
          font-size: 14px;
          font-weight: 600;
          color: #FFF;
          content: "\F00C";
          border: unset;
          transform: unset;
        }
      }

      .el-checkbox__input {
        top: -1px;
      }
    }
  }
  */
  &.isStyleBase {
    text-align: left;

    .el-form-item {
      margin-bottom: 16px;
    }

    .el-form-item__label {
      width: 100%;
      padding-bottom: 0;
      margin-bottom: 0.25rem;
      font-size: 0.875rem;
      line-height: 1.5;
      color: $color-gray-2;
    }

    .el-input__inner {
      height: 54px;
      padding-right: 2rem;
      padding-left: 1rem;
      font-size: 0.875rem;
      letter-spacing: 0.15em;
      cursor: pointer;
      border: 1px solid $color-line-2;
      border-radius: 0;
      opacity: 1;
      transition: border 0.3s;

      &:hover:not(:disabled) {
        border-color: mix($color-primary, #DCDFE6, 50%);
      }

      &:focus:not(:disabled) {
        border-color: $color-primary;
      }

      @include max-md {
        height: 40px;
        font-size: 0.875rem;
      }
    }

    /* el-form size="small"：還原 Element 小尺寸，避免被上方 54px 等規則蓋掉 */
    .el-input.el-input--small {
      .el-input__inner {
        height: 32px;
        line-height: 32px;
        font-size: 0.8125rem;
        letter-spacing: 0.05em;
        padding-left: 0.75rem;
        padding-right: 0.75rem;

        @include max-md {
          height: 32px;
          font-size: 0.8125rem;
        }
      }
    }

    .el-input-group--prepend {
      position: relative;
      z-index: 0;
    }

    .el-input-group__prepend {
      z-index: -1;
    }

    .el-date-editor {
      position: relative;

      /* 左側日曆圖示／右側清除與箭頭：勿與 placeholder、輸入文字重疊 */
      &.el-input {
        .el-input__inner {
          padding-left: 2.625rem;
          padding-right: 2.25rem;
          box-sizing: border-box;
        }

        .el-input__prefix {
          left: 0.75rem;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }

      &.el-input.el-input--small {
        .el-input__inner {
          padding-left: 2.125rem;
          padding-right: 1.875rem;
        }

        .el-input__prefix {
          left: 0.5rem;
        }
      }

      .el-input__suffix {
        width: 25px;
        transition: transform 0.3s;
        transform: rotate(180deg);

        &::before {
          position: relative;
          top: 2px;
          right: 0;
          font-family: $font-awesome;
          font-size: 1.125rem;
          color: $color-gray-3;
          content: '\f077';
          transform-origin: center;
        }
      }

      .el-input__inner {
        &:focus {
          ~ .el-input__suffix {
            transform: rotate(0deg);
          }
        }
      }
    }

    .el-select, .el-date-editor {
      width: 100%;

      .el-input__inner {
        border-radius: 0;

        @include max-md {
          height: 40px;
          line-height: 40px;
        }
      }

      .el-input__icon {
        line-height: 36px;
      }

      .el-input__suffix {
        right: 7px;
        line-height: 36px;
      }

      .el-select__caret {
        &::before {
          position: relative;
          top: 2px;
          font-family: $font-awesome;
          font-size: 1.125rem;
          color: $color-gray-3;
          content: '\f077';
        }
      }

      &:hover {
        .el-input__inner {
          border-color: $color-primary;
        }
      }
    }

    .el-select.el-input--small .el-input__inner,
    .el-date-editor.el-input--small .el-input__inner {
      font-size: 0.8125rem;

      @include max-md {
        height: 32px;
        line-height: 32px;
      }
    }

    .el-radio {
      .el-radio__label {
        font-size: 1rem;

        @include max-md {
          font-size: 0.875rem;
        }
      }

      .el-radio__inner {
        width: 20px;
        height: 20px;

        &::after {
          width: 10px;
          height: 10px;
          background: $color-primary;
        }
      }

      .el-radio__input {
        top: -1px;

        &.is-checked {
          .el-radio__inner {
            background: #FFF;
            box-shadow: none !important;
          }
        }

      }
    }

    .el-radio-group {
      line-height: 54px;

      @include max-md {
        line-height: 1;
      }
    }

    .el-checkbox {
      .el-checkbox__label {
        line-height: 40px;
      }

      .el-checkbox__inner {
        width: 20px;
        height: 20px;
        border-width: 2px;
        border-radius: 4px;
        box-shadow: none !important;

        &::after {
          left: 1.5px;
          font-family: $font-awesome;
          font-size: 14px;
          font-weight: 600;
          color: #FFF;
          content: "\F00C";
          border: unset;
          transform: unset;
        }
      }

      .el-checkbox__input {
        top: -1px;
      }
      &.isStyleDingBeauty {
        .el-checkbox__inner {
          border-radius: 0;
        }
      }
    }

    .el-textarea {
      .el-textarea__inner {
        padding: 1rem;
        font-size: 1rem;
        appearance: none;
        border-radius: 0;

        @include max-md {
          font-size: 0.875rem;
        }

        &:hover:not(:disabled) {
          border-color: mix($color-primary, #DCDFE6, 50%);
        }

        &:focus:not(:disabled) {
          border-color: $color-primary;
        }
      }

      &.el-input--small .el-textarea__inner {
        padding: 0.5rem 0.75rem;
        font-size: 0.8125rem;
        line-height: 1.45;

        @include max-md {
          font-size: 0.8125rem;
        }
      }
    }
  }

  &.isStylePrepaidJtails {
    .el-form-item {
      &.is-error {
        .el-input__inner {
          border-color: $color-danger;
          animation: errorBorder 0.6s 1s forwards;

          &::placeholder {
            color: $color-danger;
          }
        }

        .el-select__caret::before {
          color: $color-danger;
          animation: errorColor 0.6s 1s forwards;
        }

        &:hover {
          .el-input__inner {
            // border-color: darken($color-danger, 10%) !important;
          }
        }
      }
    }

    @keyframes errorBorder {
      0% {
        border-color: $color-danger;
      }

      100% {
        border-color: $color-line;
      }
    }

    @keyframes errorColor {
      0% {
        color: $color-danger;
      }

      100% {
        color: $color-gray-3;
      }
    }

    .el-date-editor {
      position: relative;

      .el-input__inner {
        &:focus {
          ~ .el-input__suffix {
            transform: rotate(0deg);
          }
        }
      }

      .el-input__suffix {
        width: 25px;
        transition: transform 0.3s;
        transform: rotate(180deg);

        &::before {
          position: relative;
          top: 0;
          right: 0;
          font-family: $font-awesome;
          font-size: 0.875rem;
          font-weight: 400;
          color: $color-gray-3;
          content: '\f077';
          transform-origin: center;
        }
      }
    }

    .el-select, .el-date-editor {
      width: 100%;

      .el-input__inner {
        height: 54px;
        padding-right: 2rem;
        padding-left: 1rem;
        font-size: 0.875rem;
        letter-spacing: 0.15em;
        cursor: pointer;
        border: 1px solid $color-line;
        border-radius: 0;
        transition: border 0.3s;

        &:hover {
          border-color: $color-primary;
        }
      }

      .el-select__caret {
        &::before {
          position: relative;
          top: 1px;
          font-family: $font-awesome;
          font-size: 0.875rem;
          font-weight: 400;
          color: $color-gray-3;
          content: '\f077';
        }
      }

      .el-input__prefix {
        cursor: pointer;
      }

      .el-input__suffix {
        right: 7px;
      }

      &:hover {
        .el-input__inner {
          border-color: $color-primary;
        }
      }
    }

    .el-form-item__label {
      padding-bottom: 0;
      margin-bottom: 0.5rem;
      font-size: 0.75rem;
      line-height: 1.5;
      color: $color-gray-2;

      @include max-sm {
        margin-bottom: -0.5rem;
      }
    }

    .el-checkbox {
      .el-checkbox__label {
        font-size: 0.875rem;
      }

      .el-checkbox__inner {
        width: 20px;
        height: 20px;
        border-width: 2px;
        border-radius: 4px;

        &::after {
          left: 1.5px;
          font-family: $font-awesome;
          font-size: 14px;
          font-weight: 600;
          color: #FFF;
          content: "\F00C";
          border: unset;
          transform: unset;
        }
      }

      .el-checkbox__input {
        top: -1px;
      }
    }
  }

  &.isStyleCoupon {
    .el-input__inner {
      height: 36px;
      line-height: 36px;
      letter-spacing: 0.1em;
      border-radius: 6px;
    }
    &.isStyleDingBeauty {
      .el-input__inner {
        border-radius: 0;
      }
    }
  }
  .el-date-editor {
    &.isStyleDingBeauty {
      &.isUnderLine {
        .el-input__inner {
          background-color: transparent;
          background: transparent;
          border-width: 0 0 1px 0;
          border-radius: 0;
        }
      }
    }
  }
}

div.el-loading-mask {
  z-index: $z-index-el-loading-mask;

  &.isStyleCheckout {
    .el-loading-spinner {
      left: 50%;
      width: 200px;
      padding: 1rem;
      font-size: 3rem;
      background: #fff;
      border-radius: 8px;
      box-shadow: 2px 8px 36px #1c2c5414;
      transform: translateX(-50%);
    }
  }
}

// ===
// Message
// ===
div.el-message {
  padding: 1rem 1.25rem;
  border-radius: 10px;
  backdrop-filter: blur(15px);

  &::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    content: '';
  }

  &::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -2;
    content: '';
  }

  .el-message__icon {
    font-size: 1.5rem;
  }

  .el-message__content {
    font-size: 1rem;
    font-weight: 500;

    .el-message__title {
      font-size: 0.875rem;
      font-weight: 500;
      line-height: 1.25;
    }

    .el-message__content {
      display: block;
      max-width: 93vw;
      overflow: hidden;
      font-size: 0.75rem;
      font-weight: 400;
      color: $color-gray-2 !important;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .el-icon-info::before {
    font-family: $font-awesome;
    content: "\f05a";
  }

  &.el-message--success {
    background: transparent;
    border: 1px solid $color-success;

    &::before {
      background: rgba($color-success, 0.06);
    }

    &::after {
      background: rgba(#fff, 0.95);
    }

    .el-message__icon, .el-message__content {
      color: $color-success;
    }
  }

  &.el-message--error {
    background: transparent;
    border: 1px solid $color-danger;

    .el-message__icon, .el-message__content {
      color: $color-danger;
    }

    &::before {
      background: rgba($color-danger, 0.06);
    }

    &::after {
      background: rgba(#fff, 0.95);
    }
  }

  &.el-message--warning {
    background: transparent;
    border: 1px solid $color-warning;

    .el-message__icon, .el-message__content {
      color: $color-warning;
    }

    &::before {
      background: rgba($color-warning, 0.06);
    }

    &::after {
      background: rgba(#fff, 0.95);
    }
  }

  &.el-message--info {
    // background: rgba($color-info, 0.35);
    background: transparent;
    border: 1px solid $color-info;

    .el-message__icon, .el-message__content, .el-message__closeBtn {
      color: lighten($color-gray-1, 20%);
    }

    &::before {
      background: rgba($color-info, 0.06);
    }

    &::after {
      background: rgba(#fff, 0.95);
    }
  }
}

// ===
// Message Box
// ===
%elMessageBoxBase {
  padding: 0.5rem 0.5rem 1rem;
  border: unset;
  border-radius: 16px;
  box-shadow: 2px 8px 36px #1C2C5414;

  @include max-md {
    width: 100%;
    max-width: 420px;
  }
  .el-message-box__header {
    text-align: center;
    color: $color-primary;
  }
  .el-message-box__content {
    padding-bottom: 1rem;
  }

  .el-message-box__headerbtn {
    &:focus {
      outline: none;
    }
  }

  .el-message-box__close {
    font-size: 1.5rem;
  }

  .el-button {
    &:focus {
      outline: none;
    }
  }

  &.isReverse {
    .el-message-box__btns {
      display: flex;
      flex-direction: row-reverse;
      justify-content: flex-start;

      button {
        margin-left: 0.5rem;
      }
    }
  }
}

.el-message-box {
  &.isStyleBase {
    @extend %elMessageBoxBase;
  }

  &.isStyleError {
    @extend %elMessageBoxBase;

    ol {
      padding-left: 0;
      padding-left: 0.5em;
      margin-bottom: -1rem;
      font-weight: 500;
      text-transform: capitalize;
      list-style: none;
    }

    ul {
      padding-left: 1em;
      margin-bottom: 0.5rem;
      font-size: 0.75rem;
      color: $color-gray-2;
      text-transform: initial;
      list-style: none;
    }
  }
  &.isStyleRemove {
      width: 780px;
      border-radius: 0;
      max-width: 90%;
    .el-message-box__title {
      padding-top: 3rem;
      color: $color-primary-dark;
    }
    .el-message-box__content {
      display: flex;
      justify-content: center;
      align-items: center;
      color: $color-gray-2;
    }
    .el-message-box__btns {
      flex-direction: column-reverse !important;
      button {
        height: 57px;
        border-radius: 8px;
        margin-bottom: 1rem;
        &.isStyleRemoveCancelButton {
          border: 1px solid $color-gray-2;
          color: $color-gray-2;
      
          &:hover {
            border-color: $color-primary;
            background: transparent;
          }
        }
      }
      
    }
  }
  &.isStyleDingBeauty {
    border-radius: 0;
    &.isStyleRemove {
      .el-message-box__title {
        color: $color-secondary;
      }
      .el-message-box__btns {
        flex-direction: column-reverse !important;
        button {
          border-radius: 0;
          &.isStyleRemoveCancelButton {
            border: 1px solid $color-gray-2;
            color: $color-secondary;
            &:hover {
              border-color: $color-secondary;
              background: transparent;
            }
          }
        }
      }
    }
  }
}

// ===
// Modal
// ===
div.v-modal {
  background: rgba(#000, 0.3);
  backdrop-filter: blur(2px);
  opacity: 1;
}

// ===
// Scrollbar
// ===
div.el-scrollbar {
  // z-index: 10000;
  .el-scrollbar__bar {
    z-index: $z-index-el-scrollbar;

    @include max-lg {
      display: none;
    }

    &.is-vertical {
      opacity: 0.3;

      &:hover, &:active {
        opacity: 1;
      }

      .el-scrollbar__thumb {
        background: rgba($color-primary, 1);
      }
    }

    &.is-horizontal {
      display: none;
    }
  }

  .el-scrollbar__wrap {
    overflow-x: hidden;
  }
}

// ===
// Select
// ===
.el-select {
  &.isStylePet {
    &.isNull {
      .el-input__inner {
        padding-left: 0 !important;
      }
    }

    .el-input__prefix {
      position: absolute;
      top: 0;
      right: 0;
      padding-right: 2rem;
      font-size: 0.875rem;
      color: $color-gray-2;
      text-align: right;

      > div {
        display: flex;
        width: 100%;
      }

      .prefix {
        &__img {
          position: relative;
          top: 6px;
          flex-shrink: 0;
          width: 26px;
          height: 26px;
          margin-right: 0.75rem;
          background-position: center;
          background-size: cover;
          border-radius: 100%;
        }

        &__category {
          flex-grow: 1;

          @include max-sm {
            display: none;
          }
        }
      }
    }

    .el-input__inner {
      padding-right: 15.5rem !important;
      padding-left: 2.75rem !important;

      @include max-sm {
        padding-right: 2rem !important;
      }
    }
  }

  &.isStylePet2 {
    &.isNull {
      .el-input__inner {
        padding-left: 0 !important;
      }
    }

    .el-input__prefix {
      position: absolute;
      top: 0;
      right: 0;
      padding-right: 2rem;
      font-size: 0.875rem;
      color: $color-gray-2;
      text-align: right;

      > div {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        height: 100%;
        padding-left: 0.5rem;
        line-height: 1.5;
        text-align: left;
      }

      .prefix {
        &__meta {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
        }

        &__title {
          margin-bottom: 0.25rem;
          font-weight: 600;
          color: $color-primary-dark;
        }

        &__img {
          left: 0.5rem;
          // position: relative;
          // top: 21px;
          flex-shrink: 0;
          width: 70px;
          height: 70px;
          margin-right: 0.75rem;
          background-position: center;
          background-size: cover;
          border-radius: 100%;
        }

        &__category {
          font-size: 0.75rem;
          color: #a19991;
        }
      }
    }

    .el-input__inner {
      height: 110px !important;
      padding-right: 100% !important;
      padding-left: 0 !important;
      border-radius: 0;

      @include max-sm {
        // padding-right: 2rem !important;
      }
    }
  }

  &.isStylePetJtails {
    &.isNull {
      .el-input__inner {
        padding-left: 0 !important;
      }
    }

    .el-input__prefix {
      position: absolute;
      top: 0;
      right: 0;
      padding-right: 2.5rem;
      font-size: 0.875rem;
      color: $color-gray-2;
      text-align: right;

      > div {
        display: flex;
        width: 100%;
      }

      .prefix {
        &__img {
          position: relative;
          top: 14px;
          left: 8px;
          flex-shrink: 0;
          width: 26px;
          height: 26px;
          margin-right: 0.75rem;
          background-position: center;
          background-size: cover;
          border-radius: 100%;
        }

        &__category {
          flex-grow: 1;
          line-height: 54px;

          @include max-sm {
            display: none;
          }
        }
      }
    }

    .el-input__inner {
      padding-right: 15.5rem !important;
      padding-left: 3rem !important;

      @include max-sm {
        padding-right: 2rem !important;
      }
    }
  }

  &.isStyleFilter {
    min-width: 174px;

    @include max-lg {
      width: 140px;
      min-width: auto;
    }

    @include max-md {
      width: 100%;
      margin-bottom: 0.8rem;
    }

    .el-input__inner {
      height: 54px;
      padding-left: 1rem;
      font-size: 1rem;
      letter-spacing: 0.15em;
      background: transparent;
      border-radius: 0;

      @include max-lg {
        height: 40px;
        font-size: 0.75rem;
      }
    }

    .el-input__suffix {
      right: 10px;
    }

    .el-select__caret {
      &::before {
        position: relative;
        top: 2px;
        font-family: $font-awesome;
        font-size: 1.125rem;
        color: $color-gray-3;
        content: '\f077';

        @include max-lg {
          top: 3px;
        }
      }
    }

    &:hover {
      .el-input__inner {
        border-color: $color-primary;
      }
    }
  }
  &.isStyleDingBeauty {
    &.isUnderLine {
      .el-input__inner {
        background-color: transparent;
        background: transparent;
        border-width: 0 0 1px 0;
        border-radius: 0;
      }
    }
    &.isDarkMode {
      .el-input__inner {
        color: #fff;
      }
    }
  }
  &.isUsePrepaid {
    padding: 2.125rem 1.25rem;
    border: 1px solid $color-line-2;
    border-top: 0;
    background-color: #F5F6F9;
  }
}

.el-input {
  &.isStyleVerify {
    .el-input__inner {
      padding-left: calc((100% - 9rem) / 2);
      // text-align: center;
      // font-family: $font-number;
      font-size: 2rem;
      text-indent: 0.5em;
      letter-spacing: 0.5em;

      &[maxlength="6"] {
        padding-left: calc((100% - 14rem) / 2);
      }
    }
  }
}

// ===
// Steps
// ===
.el-steps {
  &.isStyleBase {
    @include max-lg {
      // justify-content: space-between;
    }

    .el-step {
      // display: inline-flex;
      // align-items: center;
      // justify-content: flex-start;

      @include max-lg {
        // display: flex;
        // flex-basis: auto !important;
        // flex-direction: column;
        // align-items: center;
        // width: 100%;
        // max-width: none !important;
      }

      &:hover {
        .el-step__head {
          &.is-finish {
            cursor: pointer;

            .el-step__icon {
              // background: $color-primary;
            }
          }
        }
        .el-step__title {
          &.is-finish {
            color: $color-primary;
            cursor: pointer;
          }
        }
      }
      &.isStyle-5 {
        .el-step__title {
          left: -7px;
          position: relative;
          @include max-lg {
            left: 0px;
          }
        }
      }
      &.isStyle-6 {
        .el-step__title {
          position: relative;
          left: -18px;
          @include max-lg {
            left: -9px;
          }
        }
      }
      &.isStyle-4 {
        @include max-lg {
          position: relative;
          left: 5px;
        }
      }
    }
    .el-step__title {
      &.is-finish {
        color: darken($color-primary, 30%);
      }
    }
    .el-step__head {
      // flex-shrink: 0;
      // width: 60px;

      // @include max-lg {
      //   display: flex;
      //   justify-content: center;
      // }

      &.is-finish {
        .el-step__icon {
          background: #fff;
        }

        .el-step__icon-inner {
          color: #FFF;
          background: darken($color-primary, 10%);
        }
      }

      &.is-process {
        .el-step__icon {
          background: #fff;
        }

        .el-step__icon-inner {
          color: #FFF;
          background: $color-primary;
        }
      }
    }

    .el-step__icon {
      width: 60px;
      height: 60px;
      border: 1px solid #fff;
      background: #fff;
      // transition: background 0.3s;

      @include max-lg {
        // width: 36px;
        // height: 36px;
      }
    }

    .el-step__icon-inner {
      position: relative;
      top: 0;
      left: 1px;
      font-family: $font-number;
      font-size: 1.25rem;
      font-weight: 500;
      width: 45px;
      height: 45px;
      background: $color-line;
      border-radius: 100%;
      color: #fff;
      line-height: 45px;
    }
    &.isStyleDingBeauty {
      .el-step__icon-inner {
        border-radius: 0;
        width: 40px;
        height: 40px;
        line-height: 40px;
        box-shadow: 0 0 0 1px #fff, 0 0 0 3px $color-line;
        line-height: inherit;
      }
      .el-step__icon {
        width: 66px;
        height: 50px;
        border: 1px solid #fff;
        background: #fff;
      }
      .el-step__head {
        &.is-finish {
          .el-step__icon {
            background: #fff;
          }

          .el-step__icon-inner {
            color: #FFF;
            background: darken($color-primary, 10%);
            box-shadow: 0 0 0 1px #fff, 0 0 0 3px darken($color-primary, 10%);
          }
        }

        &.is-process {
          .el-step__icon {
            background: #fff;
          }

          .el-step__icon-inner {
            color: #FFF;
            background: $color-primary;
            box-shadow: 0 0 0 1px #fff, 0 0 0 3px $color-primary;
          }
        }
      }
    }
    .el-step__line {
      // display: none;
      top: 50%;
      transform: translateY(-50%);
      color: $color-line;
    }

    .el-step__title {
      font-weight: 400;
      color: $color-gray-2;
      transition: color 0.3s;

      @include max-lg {
        font-size: 0.875rem;
      }

      @include max-2sm {
        font-size: .75rem;
        letter-spacing: 0.15em;
      }

      &.is-finish {
        color: darken($color-primary, 30%);
      }
      &.is-process {
        color: $color-primary;
      }
    }
  }

  &.isStyleStepJtails {
    padding-bottom: 18px;
    overflow: hidden;

    .el-step {
      &.isUse {
        .el-step__head {
          cursor: pointer;

          .el-step__icon {
            &::before {
              position: absolute;
              top: 5px;
              right: 5px;
              bottom: 5px;
              left: 5px;
              z-index: 1;
              display: flex;
              align-items: center;
              justify-content: center;
              padding-left: 3px;
              font-family: $font-fontello;
              font-size: 1.25rem;
              font-weight: 500;
              color: $color-primary;
              content: $fontello-paw;
              border: 2px solid $color-primary;
              border-radius: 100%;
              transform: rotate(-30deg);
            }
          }
        }
      }

      .el-step__head {
        &.is-process {
          color: #fff;

          .el-step__icon {
            color: white;
            background: $color-primary-dark;
            border-color: $color-primary-dark;

            &::before {
              color: white;
              background-color: $color-primary-dark;
              border-color: white;
            }
          }

          &::before {
            position: absolute;
            bottom: -2.9rem;
            left: 11px;
            z-index: 1;
            width: 0;
            height: 0;
            content: "";
            filter: drop-shadow(0 1px 16px rgba(0, 0, 0, 0.5));
            border-color: transparent transparent #fff transparent;
            border-style: solid;
            border-width: 0 12px 14px 12px;
          }
        }
      }
    }

    &.isHistory {
      .el-step {
        &.isUse {
          .el-step__head {
            cursor: pointer;

            .el-step__icon {
              &:hover {
                border-color: $color-primary-dark;
              }
            }
          }

          &:hover {
            .el-step__icon {
              border-color: $color-primary-dark;
            }

            .el-step__title {
              color: $color-primary-dark;
              cursor: pointer;
            }
          }
        }

        .el-step__head {
          &.is-process {
            .el-step__icon {
              color: transparent;
            }
          }
        }
      }
    }
    .el-step__icon {
      width: 46px;
      height: 46px;
      padding-left: 3px;
      font-weight: 300;
      color: #726F65;
      background: #fff;
      // border: 1px solid #C6C6BA;
      border: 1px solid #C6C6BA;

      .el-step__icon-inner {
        z-index: 1;
      }
    }

    .el-step__title {
      font-family: $font-number;
      font-size: 0.75rem;
      line-height: 2rem;
      color: #726F65;
    }

    .el-step__line {
      top: 22px;
      height: 1px;
    }
  }
}

// ===
// Table
// ===
%isTableStyleBase {
  thead th {
    font-size: 0.75rem;
    color: rgba($color-gray-1, 0.9);
    background: rgba($color-primary, 10%);
    border-bottom: unset;
  }

  th.is-leaf {
    border-bottom-width: 2px;
  }

  td {
    border-bottom-width: 2px;
  }

  .el-table__expanded-cell {
    background: rgba($color-blue, 0.1) !important;
    padding-bottom: 0;
    border-bottom: 0;
  }

  .row-expand-cover {
    .el-table__expand-icon {
      pointer-events: none;
      opacity: 0.25;
    }
  }
}

.el-table {
  &.isStyleBase {
    @extend %isTableStyleBase;

    thead th {
      background: lighten($color-secondary-light, 5%);
    }
  }

  &.isStyleChildren {
    background: transparent;

    thead th {
      font-size: 0.75rem;
      color: rgba($color-gray-2, 0.9);
      background: transparent;
      border-bottom: unset;
    }

    tr, td {
      background: #F9F9FC !important;
    }
  }

  &.isRowPointer {
    > .el-table__body-wrapper > table > tbody > .el-table__row {
      &:hover {
        cursor: pointer;
      }
      &.isRowDefault {
        &:hover {
          cursor: default;
        }
      }
    }
  }

  &.isHoverNoBg {
    > .el-table__body-wrapper > table > tbody > .el-table__row {
      &:hover {
        > td {
          background: #fff;
        }
      }
    }
  }

  .cell > span.isTableUnderline {
    position: relative;

    &::before {
      position: absolute;
      right: 0;
      bottom: -4px;
      left: 0;
      content: '';
      border-bottom: 1px solid black;
    }

    &:hover {
      color: $color-primary-dark;
      &::before {
        border-color: 1px solid $color-primary-dark;
      }
    }
  }
  thead th.isHiddenLabel {
    display: none;
  }

  &.isStyleDingBeauty {
    thead th {
        background: $color-bg-default;
      }
  }
}

// ===
// Tabs
// ===
.el-tabs {
  &.isStyleBase {
    margin-bottom: 1rem;

    .el-tabs__item {
      height: 50px;
      padding: 0;
      font-size: 1rem;
      font-weight: 400;
      letter-spacing: 0.25em;
      outline: none;
      box-shadow: none;
      opacity: 0.7;

      &.is-active {
        opacity: 1;
      }

      &:focus.is-active.is-focus:not(:active) {
        border-radius: 0;
        box-shadow: unset;
      }

      @include max-sm {
        height: 45px;
        font-size: 0.875rem;
      }
    }
  }
  &.isStyleJtails {
    .el-tabs__item {
      height: 68px;
      padding: 0;
      font-size: 1rem;
      font-weight: 400;
      line-height: 68px;
      color: $color-primary-dark;
      letter-spacing: 0.25em;
      background: rgba(#fff, 80%);
      outline: none;
      box-shadow: none;
      opacity: 0.7;
      transition: background 0.3s, color 0.3s, opacity 0.3s;

      &:focus.is-active.is-focus:not(:active) {
        border-radius: 0;
        box-shadow: unset;
      }

      @include max-sm {
        height: 45px;
        font-size: 0.875rem;
      }

      &:hover {
        color: #fff;
        background: darken($color-primary, 10%);
        opacity: 1;
      }

      &.is-active {
        color: #fff;
        background: $color-primary;
        opacity: 1;
      }
    }

    .el-tabs__active-bar {
      display: none;
    }

    .el-tabs__nav-wrap::after {
      display: none;
    }

    .el-tabs__icon {
      position: relative;
      top: 0.05em;
      font-size: 1.5rem;
    }
  }

  &.isStyleJtailsStore {
    .el-tabs__item {
      height: 45px;
      padding: 0;
      font-size: 0.875rem;
      font-weight: 400;
      letter-spacing: 0.15em;
      outline: none;
      box-shadow: none;
      opacity: 0.7;

      span {
        padding: 0 1.875rem;
      }

      &.is-active {
        color: $color-primary-dark;
        opacity: 1;
      }

      &:focus.is-active.is-focus:not(:active) {
        border-radius: 0;
        box-shadow: unset;
      }

      @include max-sm {
        height: 45px;
        font-size: 0.875rem;
      }
    }

    .el-tabs__active-bar {
      background-color: $color-primary-dark;
    }
    &.isStyleDingBeauty {
      .el-tabs__item {
        &.is-active {
          color: $color-secondary;
        }
      }
    
      .el-tabs__active-bar {
        background-color: $color-secondary;
      }
    }
  }

  &.isStyleJtailsDialogStore {
    margin-bottom: 2rem;

    .el-tabs__item {
      font-family: $font-serif;
      font-size: 1.5rem;
      font-weight: 600;
      color: rgba(#3F3A2E, 35%);
      letter-spacing: 0.2em;

      &.is-active {
        color: $color-primary-dark;
      }

      &:focus.is-active.is-focus:not(:active) {
        border-radius: 0;
        box-shadow: unset;
      }
    }

    .el-tabs__nav-wrap::after {
      display: none;
    }

    .el-tabs__active-bar {
      display: none;
    }
  }

  &.isStyleJtailsReservation {
    .el-tabs__item {
      width: 126px;
      height: 50px;
      padding: 0 1.5rem !important;
      font-size: 1rem;
      font-weight: 400;
      line-height: 50px;
      color: #726F65;
      text-align: center;
      text-indent: 0.2em;
      // font-family: $font-serif;
      letter-spacing: 0.2em;
      background: #fff;
      // transition: color 0.3s;

      &.is-active {
        color: $color-primary-dark;
      }

      &:focus.is-active.is-focus:not(:active) {
        border-radius: 0;
        box-shadow: unset;
      }

      &:hover {
        color: $color-primary;
      }
    }

    .el-tabs__nav {
      overflow: hidden;
      border: 1px solid $color-line;
      border-radius: 8px;

      .el-tabs__item {
        &:not(:last-child) {
          border-right: 1px solid $color-line;
        }

        &.is-active {
          color: #fff;
          background: $color-primary;
        }
      }
    }

    .el-tabs__nav-wrap::after {
      display: none;
    }

    .el-tabs__active-bar {
      display: none;
    }

    .el-tabs__header {
      margin-bottom: 0;
    }
    &.isStyleDingBeauty {
      .el-tabs__nav {
        border: 1px solid #C9CDD1;
        border-radius: 0;
        .el-tabs__item {
          &:not(:last-child) {
            border-right: 1px solid #C9CDD1;
          }
        }
      }
    }
  }

  &.isStyleJtailsMenu {
    position: sticky;
    top: 80px;
    z-index: 2;
    box-shadow: 0 0 16px rgba(#000, 0.1);

    @include max-lg {
      top: 67px;
    }

    @media (max-width: 860px) {
      top: 60px;
    }

    .el-tabs__item {
      height: 60px;
      padding: 0;
      font-family: $font-serif;
      font-size: 1rem;
      font-size: 0.875rem;
      font-weight: 400;
      font-weight: 600;
      line-height: 60px;
      color: #3F3A2E;
      letter-spacing: 0.25em;
      background: #fff;
      outline: none;
      box-shadow: none;
      transition: background 0.3s, color 0.3s, opacity 0.3s;

      &.is-active {
        color: $color-primary-dark;
        background: $color-primary-light;
        opacity: 1;
      }

      &:focus.is-active.is-focus:not(:active) {
        border-radius: 0;
        box-shadow: unset;
      }

      @include max-sm {
        height: 45px;
        font-size: 0.875rem;
      }

      &:hover {
        color: $color-primary-dark;
        // background: darken($color-primary, 10%);
        opacity: 1;
      }
    }

    .el-tabs__active-bar {
      display: none;
    }

    .el-tabs__nav-wrap::after {
      display: none;
    }

    .el-tabs__icon {
      position: relative;
      top: 0.05em;
      font-size: 1.25rem;
      font-weight: 400;
    }

    .el-tabs__header {
      margin-bottom: 0;
    }
    &.isStyleDingBeauty { 
      .el-tabs__item {
        color: $color-secondary;
        font-weight: 400;
        padding: 0 20px;
        &.is-active {
          color: #BF9661;
          background: #F1DFC8;
        }
        &:hover {
          color: #BF9661;
        }
      }
      .el-tabs__nav-next,
      .el-tabs__nav-prev {
        line-height: 60px;
        background: #fff;
        width: 30px;
        text-align: center;
        z-index: 3;
        &:hover {
          color: $color-primary;
        }
      }
      .el-tabs__nav-scroll {
        margin-left: 10px;
        margin-right: 10px;
      }
    }
  }

  &.isStyleJtailsPrepaid {
    margin-top: -40px;
    margin-bottom: -40px;
    box-shadow: 0 0 16px rgba(#000, 0.1);

    @include max-lg {
      margin-top: -25px;
      margin-bottom: -25px;
    }

    .el-tabs__item {
      height: 80px;
      padding: 0;
      font-family: $font-serif;
      font-size: 1rem;
      font-weight: 400;
      line-height: 80px;
      color: $color-primary-dark;
      letter-spacing: 0.25em;
      background: #fff;
      outline: none;
      box-shadow: none;
      transition: background 0.3s, color 0.3s, opacity 0.3s;

      &:focus.is-active.is-focus:not(:active) {
        border-radius: 0;
        box-shadow: unset;
      }

      @include max-lg {
        height: 50px;
        // height: 56px;
        font-size: 0.875rem;
        line-height: 50px;
      }

      &:hover {
        color: #fff;
        background: darken($color-primary, 10%);
        opacity: 1;
      }

      &.is-active {
        color: #fff;
        background: $color-primary;
        opacity: 1;
      }
    }

    .el-tabs__active-bar {
      display: none;
    }

    .el-tabs__nav-wrap::after {
      display: none;
    }

    .el-tabs__icon {
      position: relative;
      top: 0.05em;
      font-size: 1.25rem;
      font-weight: 400;

      @include max-lg {
        font-size: 1rem;
      }
    }

    .el-tabs__header {
      margin-bottom: 0;
    }

  }

  &.isStyleJtailsWordpress {
    margin-bottom: 1rem;

    .el-tabs__item {
      height: 50px;
      padding: 0;
      font-size: 1rem;
      font-weight: 600;
      letter-spacing: 0.25em;
      outline: none;
      box-shadow: none;
      opacity: 0.7;

      &.is-active {
        opacity: 1;
        color: $color-secondary;
      }

      &:focus.is-active.is-focus:not(:active) {
        border-radius: 0;
        box-shadow: unset;
      }

      &:hover {
        color: $color-secondary;
      }

      @include max-sm {
        height: 45px;
        font-size: 0.875rem;
      }
    }

    .el-tabs__active-bar {
      background-color: $color-secondary;
    }
  }

  &.isStyleJtailsOrderReservation {
    .el-tabs__item {
      height: 80px;
      padding: 0 1.5rem !important;
      font-size: 1rem;
      font-weight: 400;
      line-height: 80px;
      color: #726F65;
      text-align: center;
      text-indent: 0.2em;
      // font-family: $font-serif;
      letter-spacing: 0.2em;
      background: #fff;
      // transition: color 0.3s;

      &.is-active {
        color: $color-primary-dark;
      }

      &:focus.is-active.is-focus:not(:active) {
        border-radius: 0;
        box-shadow: unset;
      }

      &:hover {
        color: $color-primary;
      }
    }

    .el-tabs__nav {
      overflow: hidden;
      border: 1px solid $color-line;

      .el-tabs__item {
        &:not(:last-child) {
          border-right: 1px solid $color-line;
        }

        &.is-active {
          color: #fff;
          background: $color-primary;
        }
      }
    }

    .el-tabs__nav-wrap::after {
      display: none;
    }

    .el-tabs__active-bar {
      display: none;
    }

    .el-tabs__header {
      margin-bottom: 0;
    }
  }
}

// ===
// Tag
// ===
.el-tag {
  &.isStylePrimary {
    font-family: $font-number;
    font-size: 1rem;
    font-weight: 600;
    color: #FFF;
    background: $color-primary;
    border-radius: 6px;
  }
  &.isStyleSecondary {
    font-family: $font-number;
    font-size: 1rem;
    font-weight: 600;
    color: #FFF;
    background: $color-secondary;
    border-radius: 6px;
  }

  &.isStyleDark {
    &.isOutline {
      font-weight: 500;
      color: $color-secondary;
      // background: white;
      background: transparent;
      border: 1px solid $color-secondary;
    }
  }

  &.isSmall {
    /* height: 21px;
    line-height: 21px; */
    height: 24px;
    line-height: 24px;
    font-size: 0.75rem;
  }

  &.isSmall2 {
    height: 26px;
    font-size: 0.75rem;
    line-height: 26px;
  }

  &.isStyleDanger {
    font-family: $font-number;
    font-size: 1rem;
    font-weight: 600;
    color: #E4B0B4;
    background: rgba(#E4B0B4, 0.15);
    &.isSmall {
      font-size: 0.75rem;
    }
  }
  &.isStyleText {
    font-family: $font-number;
    font-size: 1rem;
    font-weight: 600;
    color: $color-text;
    background: rgba($color-text, 0.15);
    &.isSmall {
      font-size: 0.75rem;
    }
  }
  &.isStyleIndigo {
    font-family: $font-number;
    font-size: 1rem;
    font-weight: 600;
    color: #CC72ED;
    background: rgba(#CC72ED, 0.15);
    &.isSmall {
      font-size: 0.75rem;
    }
  }
  &.isStyleSuccess {
    font-family: $font-number;
    font-size: 1rem;
    font-weight: 600;
    color: $color-success;
    background: rgba($color-success, 0.15);
    &.isSmall {
      font-size: 0.75rem;
    }
  }
  &.isStyleGray {
    font-family: $font-number;
    font-size: 1rem;
    font-weight: 600;
    color: #FFF;
    background: $color-gray-3;
    border-radius: 6px;
    &.isSmall {
      font-size: 0.75rem;
    }
  }
  &.isRadius-0 {
    border-radius: 0;
    border: 0;
  }
}

// ===
// Timeline
// ===
.el-timeline {
  &.isStyleBase {
    @include max-md {
      padding-left: 0.2rem;
      font-size: 0.75rem;
    }

    .el-timeline-item {
      padding: 1rem 0;

      &::before {
        position: absolute;
        right: 0;
        bottom: 0.5rem;
        left: 4rem;
        height: 1px;
        content: '';
        background: $color-line;

        @include max-md {
          left: 2rem;
        }
      }
    }

    .el-timeline-item__node {
      position: relative;
      left: -2px;
      width: 14px;
      height: 14px;
      background: #FFF;
      border: 1px solid $color-blue-dark;

      &::before {
        position: absolute;
        top: 1px;
        right: 1px;
        bottom: 1px;
        left: 1px;
        content: '';
        background: $color-blue-dark;
        border-radius: 100%;
      }
    }

    .el-timeline-item__tail {
      border-left-color: $color-blue-dark;
    }

    .el-timeline-item__wrapper {
      padding-left: 4rem;
      margin-top: -14px;

      @include max-md {
        padding-left: 2rem;
      }
    }
  }
}

// ===
// Tree
// ===
.el-tree {
  &.isStyleBase {
    .el-tree-node__expand-icon {
      display: none;
    }

    .el-tree-node__content {
      height: 2.5rem;
      background: transparent !important;
    }

    .el-checkbox__inner {
      width: 18px;
      height: 18px;
      border-width: 2px;
      border-radius: 4px;

      &::after {
        top: 1.5px;
        left: 1px;
        font-family: $font-awesome;
        font-size: 12px;
        font-weight: 600;
        color: #FFF;
        content: "\F00C";
        border: unset !important;
        transform: unset !important;
      }
    }

    .el-checkbox__input {
      &.is-indeterminate .el-checkbox__inner::before {
        top: 4px;
        height: 6px;
      }
    }

    .el-checkbox {
      margin-right: 0.5rem;
      margin-bottom: 0;
    }
  }
  &.isStyleCollapse {
    .el-tree-node__expand-icon {
      display: flex;
      order: 1;
      margin-right: -12px;
      padding-left: 12px;
      padding-top: 2px;
      font-size: 14px;
    }
  }
  &.isStyleDingBeauty {
    .el-checkbox__inner {
      border-radius: 0;
    }
  }
}

// ===
// Pagination
// ===
.el-pagination {
  &.isStyleBase {
    text-align: center;

    .el-pager li {
      padding: 0 1rem;
      font-family: $font-number;
      font-size: 1rem;
      font-weight: 400;

      &.active {
        font-weight: 500;
      }
    }

    .btn-prev {
      padding-right: 2rem;
    }

    .btn-next {
      padding-left: 2rem;
    }

    .btn-prev, .btn-next {
      i {
        font-size: 1rem;
      }
    }
  }
}

// ===
// Popper
// ===
div.el-popper {
  max-width: calc(100vw - #{$container-gap * 2});
  border: unset;
  box-shadow: 0 4px 18px #1C2C5414;

  @include max-sm {
    right: 38px;
  }

  .el-select-group__title {
    padding-left: 0.875rem;
  }

  .el-select-dropdown__list {
    padding: 0.625rem 0 0.625rem;

  }

  .el-select-dropdown__item {
    height: auto;
    padding: 0.5rem 3.5rem 0.5rem 1.125rem;
    font-size: 0.875rem;

    &::before,
    &::after {
      content: none;
      display: none;
    }

    &.is-disabled {
      .option {
        &__img {
          opacity: 0.5;
        }
      }
    }

    &:hover:not(.is-disabled), &.hover:not(.is-disabled) {
      background: rgba($color-blue, 0.3);
    }

    &.selected {
      position: relative;
      font-weight: 500;
      color: $color-primary;

      &::after {
        content: none !important;
        display: none !important;
      }

      &::before {
        display: block;
        position: absolute;
        top: 9px;
        right: 1.25rem;
        font-family: $font-fontello;
        font-size: 0.875rem;
        font-weight: 600;
        color: $color-primary;
        content: $fontello-check;
        border: unset;
        transform: unset;
      }
    }
    &.isStyleDingBeauty {
      &:hover:not(.is-disabled),
        &.hover:not(.is-disabled) {
          background: rgba($color-blue, 0.3); 
        }
    }
  }

  &.isStylePet {
    .el-select-dropdown__list {
      padding-bottom: 77px;
    }

    .el-select-dropdown__item {
      @include max-sm {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
      }

      &.selected::before {
        @include max-sm {
          top: 13px;
        }
      }

      &.isNew {
        position: absolute;
        bottom: 0;
        z-index: 2001;
        width: 100%;
        padding-top: 1rem;
        padding-bottom: 1rem;
        margin-bottom: 0;
        font-weight: 600;
        background: #FFF;
        border-top: 1px solid $color-line;

        &:hover {
          background: lighten($color-blue, 15%);
        }
      }
    }


    .option {
      &__item {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      &__img {
        flex-shrink: 0;
        width: 30px;
        height: 30px;
        margin-right: 0.75rem;
        background-position: center;
        background-size: cover;
        border-radius: 100%;
      }

      &__content {
        display: flex;
        flex-grow: 1;
        align-items: center;
        justify-content: space-between;
        width: 100%;

        @include max-md {
          flex-direction: column;
          align-items: flex-start;
          line-height: 1.5;
        }
      }

      &__text {
        flex-shrink: 0;
        width: calc(100% - 10rem);
        padding-right: 0.5rem;
        overflow: hidden;
        text-overflow: ellipsis;

        @include max-md {
          width: calc(100% - 2rem);
          font-size: 1rem;
        }
      }

      &__category {
        flex-grow: 1;
        font-size: 0.75rem;
      }
    }
    &.isStyleDingBeauty {
      .option {
        &__text {
          width: auto;
          padding: 0;
          text-overflow: initial;

          @include max-md {
            width: auto;
          }
        }
      }
    }
  }
}

.el-popper {
  &.isStyleDropdownMenu {
    left: 0;
    width: 100vw;
    text-align: center;
    border-radius: 0;

    .el-dropdown-menu__item {
      padding: 0.5rem;
      font-family: $font-serif;
      font-weight: 600;

      i {
        font-weight: 400;
      }

      &:hover {
        color: $color-primary-dark;
      }

      &.isActive {
        color: $color-primary-dark;
        background-color: rgba($color-primary, 0.1);
      }
    }
  }
}

// ===
// Popover
// ===
div.el-popover {
  max-width: 100vw;
  font-size: 0.75rem;
  line-height: 1.75;
  color: $color-gray-2;

  &:focus {
    outline: none;
  }
  &.isStyleMember {
    padding: 0;
    .isDeposit {
      i {
        font-size: 1.375rem;
      }
      span {
        font-size: 1.125rem
      }
      i, span {
        color: #BB9A37;
      }

      &:hover {
        color: inherit;
      }
    }
    .memberBoxtop {
      padding: 1.25rem;
      border-bottom: 1px solid $color-line;
      &__name {
        color: $color-primary;
        font-size: 1.125rem;
        font-weight: 600
      }
    }
  }
  &.isStyleCartReservation {
    max-height: calc(90vh);
    overflow: auto;
    padding: 1.25rem;
    .content {
      min-height: 500px;
    }
    .cartReservationList {
      max-height: calc(90vh - 284px);
      overflow: auto;
    }
  }
  /* &__reference-wrapper {
    &:focus {
      outline: none;
    }
    .el-popover__reference {
      &:focus {
        outline: none;
      }
    }
  } */
}

// ===
// Radio Group
// ===
.el-radio-group {
  &.isStyleReservation {
    @include max-md {
      display: flex;
      width: 100%;
    }

    .el-radio {
      min-width: 80px;
      padding: 0 1rem;
      font-size: 1rem;
      line-height: 40px;
      text-align: center;
      border: 1px solid $color-gray-3;
      border-radius: 30px;

      @include max-lg {
        line-height: 35px;
      }

      @include max-md {
        width: 100%;
        min-width: 0;
      }

      &:not(:last-child) {
        margin-right: 1rem;

        @include max-md {
          margin-right: 0.5rem;
        }
      }

      &:hover {
        border-color: $color-primary;

        .el-radio__label {
          color: $color-primary;
        }
      }

      &.is-checked {
        background: $color-primary;
        border-color: $color-primary;

        .el-radio__label {
          color: #FFF;
        }
      }
    }

    .el-radio__input {
      display: none;
    }

    .el-radio__label {
      padding-left: 0;
      font-size: 1rem;
      color: $color-gray-2;

      @include max-md {
        font-size: 0.875rem;
      }
    }
  }

  &.isStyleTime {
    width: 100%;
    margin-bottom: -0.5rem;

    .el-radio {
      width: 100%;
      min-width: 80px;
      padding: 0 1rem;
      margin-bottom: 0.5rem;
      font-size: 1rem;
      line-height: 60px;
      text-align: center;
      background: #fff;
      border: 1px solid $color-gray-3;
      border-radius: 10px;

      @include max-lg {
        line-height: 45px;
      }

      @include max-md {
        min-width: 0;
        padding: 0;
      }

      &:not(:last-child) {
        margin-right: 1rem;
      }

      &:hover {
        border-color: $color-primary;

        .el-radio__label {
          color: $color-primary;
        }
      }

      &.is-checked {
        background: $color-primary;
        border-color: $color-primary;

        .el-radio__label {
          color: #FFF;
        }
      }
    }

    .el-radio__input {
      display: none;
    }

    .el-radio__label {
      padding-left: 0;
      font-size: 1rem;

      @include max-md {
        font-size: 0.875rem;
      }
    }
  }

  &.isStyleCheckout {
    @include max-xl {
      display: flex;
      flex-direction: column;
    }

    .el-radio {
      width: 156px;
      padding: 1.5rem 0;
      border: 1px solid $color-line;
      margin-bottom: 1rem;
      @include max-xl {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 1rem 2rem;
        margin-bottom: 1rem;
        &:not(:last-child) {
          margin-right: 1rem;
        }
      }

      &:hover:not(.is-disabled) {
        border-color: $color-primary;
      }

      &.is-checked {
        border-color: $color-primary;

        .el-radio__label {
          color: $color-gray-2;
        }

        .el-radio__icon {
          color: $color-primary;
        }
        .el-radio__text {
          color: $color-primary;
        }
      }

      .el-radio__input {
        display: none;

        @include max-xl {
          top: 0;
          display: block;
        }
      }
    }

    .el-radio__text {
      text-align: center;

      @include max-xl {
        display: flex;
        align-items: center;
      }
    }

    .el-radio__tip {
      margin-top: 0.25rem;
      margin-bottom: -1.25em;
      font-size: 0.75rem;
      //

      @include max-xl {
        margin-top: 0;
        margin-bottom: 0;
        font-size: inherit;
      }
    }

    .el-radio__label {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 0.875rem;
      color: $color-gray-2;

      @include max-xl {
        flex-direction: row;
        justify-content: flex-start;
        font-size: 1rem;
      }
    }

    .el-radio__icon {
      margin-bottom: 0.5rem;
      font-size: 3rem;

      @include max-xl {
        margin-right: 0.5rem;
        margin-bottom: 0;
        font-size: 2rem;
      }
      &.isFontAweSome {
        font-size: 2.5rem;
        margin-bottom: 1rem;
        top: 3px;
        position: relative;
        @include max-xl {
          margin-right: 1rem;
          margin-bottom: 0;
          font-size: 2rem;
          top: 0;
          margin-left: 0.3rem;
        }
      }
    }
  }

  &.isStyleBase {
    .el-radio {
      top: 5px;

      @include max-md {
        top: 0;
      }

      &:not(:last-child) {
        margin-right: 15px;
      }
    }
  }

  &.isStylePet {
    display: flex;
    flex-direction: column;

    .el-radio {
      display: flex;
      align-items: center;
      width: 100%;
      padding: 1rem;
      margin-right: 0;
      overflow: hidden;
      border: 1px solid $color-line;

      &:not(:last-child) {
        margin-bottom: 1rem;
      }
    }

    .el-radio__label {
      display: flex;
      align-items: center;
      padding-left: 1rem;
    }

    .el-radio__image {
      flex-shrink: 0;
      width: 50px;
      height: 50px;
      background-position: center;
      background-size: cover;
      border-radius: 100%;
    }

    .el-radio__contentBox {
      padding-left: 0.75rem;
    }

    .el-radio__title {
      margin-bottom: 0.25rem;
      font-size: 1rem;
      line-height: 1.5;
    }

    .el-radio__meta {
      font-size: 0.75rem;
      color: $color-gray-2;
    }
  }
}

// ===
// Upload
// ===
.el-upload {
  &.isStylePet {
    position: relative;
    margin-bottom: 2rem;

    .el-upload__img {
      width: 140px;
      height: 140px;
      background-color: $color-bg-default;
      background-position: center;
      background-size: cover;
      border-radius: 100%;
      opacity: 1;
      transition: opacity 0.3s;

      &:hover {
        opacity: 0.85;
      }
    }

    .el-upload__more {
      position: absolute;
      right: 0;
      bottom: 0;
      border: 3px solid #FFF;
      border-radius: 100%;
    }
  }
}

// ===
// Checkbox, Radio(Extrafield)
// ===
.el-checkbox-group, .el-radio-group {
  &.isStyleExtrafield {
    width: 100%;
    margin-bottom: -1rem;

    @include max-md {
      margin-bottom: -0.5rem;
    }

    .el-checkbox, .el-radio {
      width: 100%;
      padding: 0 1rem;
      margin-bottom: 1rem;
      border: 1px solid rgb(220, 223, 230);
      border-radius: 6px;
      background-color: #fff;
      @include max-md {
        margin-bottom: 0.5rem;
      }

      &:hover:not(.is-checked) {
        border: 1px solid #C0C4CC;
      }

      &.is-checked {
        border-color: $color-primary;
      }

      .el-checkbox, .el-radio {
        .el-checkbox__input {
          width: 100%;
        }

        &__label {
          width: 100%;
          line-height: 52px;

          @include max-md {
            line-height: 40px;
          }
        }
      }

      .el-input {
        padding-right: 1rem;
      }

      .el-input__inner {
        width: 100%;
        height: 56px;
        padding: 0;
        line-height: 56px;
        letter-spacing: 0.2em;
        background: transparent;
        border: none;

        @include max-md {
          height: 40px;
        }
      }
    }
  }
}

// ===
// Collapse
// ===
.el-collapse {
  &.isStyleBase {
    border-top: none;
    border-bottom: none;

    .el-collapse-item {
      .el-collapse-item__header {
        font-size: 0.875rem;
        color: $color-primary-dark;
        border-bottom-color: $color-primary-dark;

        &.is-active {
          border-bottom-color: inherit;

          .el-collapse-item__arrow {
            transform: rotate(-90deg);
          }
        }

        .el-collapse-item__arrow {
          font-size: 1.2rem;
          color: $color-primary-dark;
          transform: rotate(90deg);
        }
      }

      .el-collapse-item__wrap {
        border-bottom-color: transparent;

        .el-collapse-item__content {
          padding-top: 1.563rem;
        }
      }
    }
  }
  &.isStyleList {
    border-top: 0;
    border-bottom: 0;
    .el-collapse-item__header {
      flex-direction: row-reverse;
      height: 70px;
      line-height: 70px;
      border-bottom: unset;
      .name {
        font-size: 1rem;
        color: #3F3A2E
      }
      &:hover, &.is-active {
        color: $color-primary;
      }

    }

    .el-collapse-item__wrap {
      border-bottom: unset;
    }

    .el-collapse-item__content {
      padding-bottom: 1.25rem;
      padding-left: 1.5rem;
      .description {
        color: $color-gray-2;
        line-height: 2;
      }
    }

    .el-collapse-item__arrow {
      transform: translateY(-2px) rotate(0deg) !important;

      &.is-active {
        transform: translateY(-2px) rotate(90deg) !important;
      }
    }

    .el-collapse-item {
      border-bottom: 1px solid $color-line;
    }
    &.isStyleDingBeauty {
      .el-collapse-item__header {
        color: $color-secondary;
        &:hover,&.is-active {
          color: $color-secondary;
        }
      }
    }
  }
}


//===
// divider
//===
.el-divider {
  &.isStyleInvitation  {
    background-color: rgba($color-secondary, 0.5);
    margin: 4.75rem 0;
    @include max-md {
      margin: 2.75rem 0
    }
    .el-divider__text {
      color: $color-secondary;
      font-size: 1rem;
      font-weight: 400;
    }
  }
}

// ===
//  el-statistic
// ===
.el-statistic {
  &.isStyleCart {
    padding: 0.875rem;
    background: rgba(#E4B0B4, 10%);
    color: #726F65;
    .prefix {
      i {
        color: #EC5151;
        font-size: 1.125rem;
      }
    }
    .number {
      color: #EC5151;
      font-size: 0.875rem;
    }
  }
}

// ===
// el-input-number
// ===
.el-input-number {
  &.isStyleCart {
    .el-input-number__decrease, .el-input-number__increase  {
      height: 32px;
      width: 32px;
      border: 1px solid $color-primary-dark;
      border-radius: 8px;
      background: transparent;
      .el-icon-plus, .el-icon-minus {
        color: $color-primary-dark;
        transform: scale(1.4);
        letter-spacing: 0;
      }
    }
    .el-input__inner {
      border: 0;
      height: 32px;
      line-height: 32px;
      font-size: 1.25rem;
      font-weight: 400;
      width: 145px;
      color: $color-primary-dark;
      background: transparent;
    }
    &.isFull {
      width: 100%;
      .el-input__inner {
        width: 100%;
        padding-left: 2rem;
      }
    }
    &.isStyleDingBeauty {
      .el-input-number__decrease, .el-input-number__increase  {
        border-radius: 0;
      }
    }
  }
}