@import '../variables/default.scss';
@import '../mixins/index.scss';

$Component: '.at-personnel-selector';

#{$Component} {
  &_drawer {
    .at-drawer__content {
      background: $color-grey-7;
      display: flex;
      flex-direction: column;

      #{$Component}_search-bar {
        padding-top: 50px;

        .at-search-bar__input-cnt {
          border-radius: 200px;
        }
      }

      #{$Component}_bread-crumbs {
        padding: 0 30px;
        background: $color-bg;
        @include hairline-top();

        &::after {
          left: 30px;
          right: 30px;
          transform: scaleY(0.5);
        }

        &-scrollview {
          display: flex;
          font-size: 30px;
          padding: 32px 0;
          white-space: nowrap;
          width: 100%;
          box-sizing: border-box;
          align-items: center;

          &::-webkit-scrollbar {
            display: none;
            width: 0 !important;
            height: 0 !important;
            background: transparent;
          }

          .bread-crumbs-item {
            color: $color-brand;
            display: flex;
            align-items: center;

            .at-icon-right {
              margin: 0 8px;
              font-size: $font-size-sml;
            }

            &.selected {
              color: $color-black-1;
            }
          }
        }
      }

      #{$Component}_scrollview-container {
        margin-top: 24px;
        flex: 1;
        overflow: hidden;

        #{$Component}_scrollview {
          height: 100%;
        }
      }

      #{$Component}_accordion {
        background: $color-white;

        &--disabled {
          opacity: $form-opacity-disabled;
        }

        .at-accordion__header {
          padding: 32px 30px;
          font-size: $at-personnel-selector-font-size;
        }

        #{$Component}_list-item {
          padding-left: 80px;
        }
      }

      .at-checkbox {
        &__icon-cnt {
          min-width: $at-personnel-selector-checkbox-circle-size;
          width: $at-personnel-selector-checkbox-circle-size;
          flex: 0 0 $at-personnel-selector-checkbox-circle-size;
          height: $at-personnel-selector-checkbox-circle-size;
        }
      }

      #{$Component}_list-item {
        padding: 32px 30px;

        &.at-list__item--disabled {
          .at-list__item-container {
            opacity: $form-opacity-disabled;

            .at-checkbox--disabled,
            .item-extra {
              opacity: 1;
            }
          }
        }

        .at-list__item-extra {
          flex: 0 0 1rem;

          .at-icon-right {
            vertical-align: unset;
          }
        }

        &-multiple {
          .at-list__item-extra {
            display: flex;
          }

          .at-checkbox {
            align-items: center;

            &__icon-cnt {
              margin-top: 0;
              margin-right: $spacing-h-sm;
            }
          }
        }

        .icon-selected {
          color: $color-brand;
        }
      }
    }

    #{$Component}_btn-container {
      background: #fff;
      padding: 25px 30px;
      display: flex;
      flex-direction: row;

      .cancel-btn {
        margin-right: $spacing-h-lg;
      }

      .cancel-btn,
      .ok-btn {
        flex: 1;
      }
    }
  }

  #{$Component}_multiple-list-item {
    &.at-list__item--disabled {
      .at-list__item-container {
        // opacity: 1;

        .tags-container,
        .add-icon {
          opacity: $form-opacity-disabled;
        }
      }
    }

    .item-extra__info {
      display: block;

      .list-item-header {
        display: flex;
        align-items: center;
        vertical-align: middle;

        .list-item-label {
          color: $color-black-1;
          flex: 1;
          font-size: $font-size-lg;

          .list-item-brief {
            font-size: $font-size-sml;
            color: $color-warning;
            margin-left: $spacing-h-sm;
          }
        }

        .add-icon {
          color: $color-brand;
        }
      }

      .tags-container {
        .at-tag {
          min-height: 54px;
          line-height: 54px;
          padding: 0 16px;
          margin: $spacing-v-lg $spacing-h-lg 0 0;

          .at-tag--close {
            color: $color-brand;
          }
        }
      }
    }
  }

  #{$Component}_list-item {
    &.at-list__item--disabled {
      .at-list__item-container {
        opacity: 1;

        .item-extra {
          opacity: $form-opacity-disabled;
        }
      }
    }

    .item-extra__info {
      justify-content: space-between;
      align-items: center;
    }

    .close-circle-icon {
      margin: 0 20px;
      line-height: 0.7;
      color: $color-grey-3;
    }
  }
}