@use '../variables';
@use "../theme/body.tokens";
@use "../theme/palette.tokens";
@use "../theme/spacing.tokens";
@use "../theme/textfield.tokens";
@use "../theme/transitions.tokens";
@use "../theme/typography.tokens";

.pa-select-value-container {
  display: flex;
  flex-direction: column;

  .pa-selected-help {
    color: palette.$color-neutral-regular;
  }
}

.pa-select-value {
  font-weight: typography.$font-weight-regular;

  &.placeholder {
    color: textfield.$color-text-field-control-placeholder-regular;
    font-weight: body.$font-weight-placeholder;
    opacity: 0;
    transition: all 0s ease;
    &.active {
      opacity: 1;
      transition: all transitions.$transition-response;
    }
  }
}

.pa-field.pa-select {
  position: relative;

  $icon-width: spacing.rhythm(3);
  $icon-right-padding: spacing.rhythm(1);
  .pa-select-chevron {
    pointer-events: none;
    cursor: pointer;
    position: absolute;
    right: $icon-right-padding;
    top: 50%;
    transform: translateY(-50%);
    transition: transform transitions.$transition-hint;
    width: $icon-width;

    &.opened {
      transform: translateY(-50%) rotate(180deg);
    }
  }

  .pa-field-container {
    position: relative;

    &.pa-disabled {
      color: textfield.$color-text-field-control-disabled;
      .pa-select-chevron {
        color: textfield.$color-text-field-control-disabled;
      }
    }
    &.pa-readonly .pa-select-chevron {
      color: textfield.$color-text-field-control-disabled;
    }
    &:not(.pa-disabled):not(.pa-readonly) {
      cursor: pointer;
    }
  }

  .pa-field-control {
    padding-right: calc(#{$icon-width + $icon-right-padding});
    width: 100%;
  }
  .pa-field-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - #{textfield.$padding-field-control-left + $icon-width + $icon-right-padding});
  }

  .pa-dim {
    border: 1px solid transparent;
    &.pa-focus {
      border: 1px solid textfield.$border-color-field-active;
    }
    &:not(.pa-focus):not(.pa-disabled):hover {
      border: 1px solid textfield.$border-color-field-hover;
    }
    &.pa-disabled,
    &.pa-readonly {
      border: 1px solid transparent;
    }
  }
}

pa-dropdown {
  width: 100%;
}
.pa-select pa-dropdown .pa-popup-wrapper {
  max-width: none;
  width: 100%;
}