@use "sass:color";

@use "./_vars" as *;

@mixin button-color($bg: #f0f0f0, $bgDark: #000000) {
  background-color: $bg;

  &:active {
    background-color: darken($bg, 10%);
  }

  [data-theme="dark"] & {
    background-color: $bgDark;
    &:active {
      background-color: lighten($bgDark, 10%);
    }
  }
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

* {
  transition: $trans;
}

.gitpkg-input {
  @mixin c($color) {
    @include pkg-outline();
    outline-color: $color;
  }
  box-sizing: border-box;
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
  padding: 0 1em;
  height: $unitSize;
  appearance: none;

  @include pkg-border($textColor);

  @include pkg-focus;
  @include pkg-hover;

  &.success {
    @include c($successColor);
  }

  &.error {
    @include c($errorColor);
  }

  &::selection {
    background-color: $codeBgColor;
    color: lighten($accentColor, 10);
  }
}

.gitpkg-button {
  @mixin c($color) {
    @include pkg-outline;
    outline-color: $color;
  }

  @include button-color;

  text-align: center;
  cursor: pointer;

  @include pkg-border($textColor);

  @include pkg-focus;
  @include pkg-hover;

  * {
    transition:
      $trans,
      color 0s;
  }

  &:active {
    &,
    body:not(.navigation-with-keyboard) & {
      @include c(darken($accentColor, 25%));
    }
  }
  &.icon {
    width: $unitSize;
    height: $unitSize;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  &.success {
    color: $successColor;
    @include c($successColor);
  }
  &.error {
    color: $errorColor;
    @include c($errorColor);
  }
}

.gitpkg-select {
  & > &__control {
    padding: 0;
    position: relative;
    height: $unitSize;
    border-radius: 0;

    box-sizing: border-box;
    & * {
      box-sizing: border-box;
    }

    width: 100%;
    max-width: 100%;
    height: 100%;

    display: flex;
    justify-content: space-between;

    @include pkg-border($textColor);
    @include pkg-focus;
    @include pkg-hover;
  }

  &.relaxed > &__control {
    border: 0;

    background-color: field;

    &:not(:hover):not(:focus) {
      box-shadow: 0px 0 1px 0 black;
    }
  }

  & &__value-container {
    padding: 0 1em;
    & .gitpkg-select__single-value {
      color: inherit;
    }
  }

  & &__indicators {
    @include button-color;
  }

  & > .gitpkg-select__control--menu-is-open &__indicators > .mdi-icon {
    transform: rotate(180deg) scale(1);
  }

  & > &__menu {
    border-radius: 0;
    margin-top: 0;
    margin-bottom: 0;
    > .gitpkg-select__menu-list {
      padding-top: 0;
      padding-bottom: 0;
    }
  }

  & &__option {
    text-align: center;
    cursor: pointer;

    background-color: #f0f0f0;
    [data-theme="dark"] &:not(&--is-selected) {
      background-color: rgb(59, 59, 59);
      background-color: field;
    }

    &.gitpkg-select__option--is-selected {
      background-color: var(--ifm-color-primary);
      color: white;
    }

    &.gitpkg-select__option--is-focused {
      @include pkg-hover;
    }
  }
}
