@import '@taiga-ui/core/styles/taiga-ui-local';

:root {
  --tui-background-accent-1: #3880ff;
  --tui-background-accent-1-hover: #4c8dff;
  --tui-background-accent-1-pressed: #3171e0;
}

/* stylelint-disable order/order */
[tuiAppearance][data-appearance='secondary-warning'] {
  background: var(--tui-status-warning-pale);
  color: var(--tui-text-primary);

  @include appearance-hover {
    background: var(--tui-status-warning-pale-hover);
  }

  @include appearance-active {
    background: var(--tui-status-warning-pale-hover);
  }
}

[tuiAppearance][data-appearance='icon-success'] {
  color: var(--tui-status-positive);
}

[tuiAppearance][data-appearance='icon-warning'] {
  color: var(--tui-status-warning);
}

[tuiAppearance][data-appearance='icon-error'] {
  color: var(--tui-status-negative);
}

[tuiAppearance][data-appearance='flat'],
[tuiAppearance][data-appearance='outline'] {
  color: var(--tui-text-primary);
}

[tuiAppearance][data-appearance='primary'] {
  @include appearance-disabled {
    background: #eaecee;
    color: #333;
  }
}

[tuiAppearance][data-appearance='secondary-solid'] {
  background: #3dc2ff;
  color: #fff;

  @include appearance-hover {
    background: #50c8ff;
  }

  @include appearance-active {
    background: #36abe0;
  }

  @include appearance-disabled {
    background: #eaecee;
    color: #333;
  }
}

[tuiAppearance][data-appearance='tertiary-solid'] {
  background: #5260ff;
  color: #fff;

  @include appearance-hover {
    background: #6370ff;
  }

  @include appearance-active {
    background: #4854e0;
  }

  @include appearance-disabled {
    background: #eaecee;
    color: #333;
  }
}

[tuiAppearance][data-appearance='success-solid'] {
  background: #2dd36f;
  color: #fff;

  @include appearance-hover {
    background: #42d77d;
  }

  @include appearance-active {
    background: #28ba62;
  }

  @include appearance-disabled {
    background: #eaecee;
    color: #333;
  }
}

[tuiAppearance][data-appearance='warning-solid'] {
  background: #ffc409;
  color: #fff;

  @include appearance-hover {
    background: #ffca22;
  }

  @include appearance-active {
    background: #e0ac08;
  }

  @include appearance-disabled {
    background: #eaecee;
    color: #333;
  }
}

[tuiAppearance][data-appearance='danger-solid'] {
  background: #eb445a;
  color: #fff;

  @include appearance-hover {
    background: #ed576b;
  }

  @include appearance-active {
    background: #cf3c4f;
  }

  @include appearance-disabled {
    background: #eaecee;
    color: #333;
  }
}

[tuiAppearance][data-appearance='input-file'] {
  &:hover,
  &:active {
    background: transparent !important;
  }

  tui-root._mobile &::after {
    display: none;
  }
}

tui-dialog {
  transform: translate3d(0, 0, 0);
}

tui-opt-group[data-label^='⚠️']::before {
  color: var(--tui-status-warning);
}

tui-hint[data-appearance='onDark'] {
  background: white !important;
  color: #222 !important;
}

[tuiLink] {
  color: var(--tui-text-action) !important;

  &:hover {
    color: var(--tui-text-action-hover) !important;
  }
}

[tuiAppearance][data-appearance='drawer'] {
  // TODO: Theme
  background: rgb(81 80 83 / 86%);
  border-radius: 10rem;

  &._focused::after {
    color: var(--tui-background-accent-1);
  }
}

tui-dropdown[data-appearance='start-os'][data-appearance='start-os'] {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(0.25rem);
  box-shadow: 0 0.25rem 0.25rem rgb(0 0 0 / 25%);
  border-radius: 0.325rem;
  // TODO: Replace --tui-background-elevation-2 when Taiga UI is updated
  background: rgb(63 63 63 / 80%);

  tui-opt-group {
    &::before {
      background: var(--tui-background-neutral-1);
      height: 1px;
    }

    &::after {
      display: none;
    }
  }

  [tuiOption] {
    border-radius: 0.1875rem !important;
    transition-property: background, box-shadow;

    &:focus,
    &._with-dropdown {
      box-shadow:
        inset 0 -1px rgba(0, 0, 0, 0.3),
        inset 0 1px rgba(255, 255, 255, 0.1),
        inset 0 -3rem 4rem -2rem rgba(0, 0, 0, 0.3);
    }
  }
}

[tuiSidebar] > div.t-wrapper {
  backdrop-filter: blur(1rem);
  background: rgb(34 34 34 / 80%);
}

// TODO: Move to Taiga UI
a[tuiIconButton]:not([href]) {
  pointer-events: none;
  opacity: var(--tui-disabled-opacity);
}