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

/* stylelint-disable order/order */
[tuiWrapper][data-appearance='secondary-warning'] {
  background: var(--tui-warning-bg);
  color: var(--tui-warning-fill);

  &[data-mode='onDark'] {
    background: var(--tui-warning-bg-night);
    color: var(--tui-warning-fill-night);

    @include wrapper-hover {
      background: var(--tui-warning-bg-night-hover);
    }

    @include wrapper-active {
      background: var(--tui-warning-bg-night-hover);
    }
  }

  @include wrapper-hover {
    background: var(--tui-warning-bg-hover);
  }

  @include wrapper-active {
    background: var(--tui-warning-bg-hover);
  }
}

[tuiWrapper][data-appearance='success'] {
  color: var(--tui-success-fill);
}

[tuiWrapper][data-appearance='warning'] {
  color: var(--tui-warning-fill);
}

[tuiWrapper][data-appearance='error'] {
  color: var(--tui-error-fill);
}

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

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

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

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

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

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

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

  &._focused::after {
    color: var(--tui-primary);
  }
}

tui-dropdown[data-appearance='start-os'][data-appearance='start-os'] {
  border: 0;
  box-shadow: 0 0.25rem 0.25rem rgb(0 0 0 / 25%);
  // TODO: Replace --tui-elevation-02 when Taiga UI is updated
  background: rgb(63 63 63 / 95%);

  tui-opt-group {
    &::before {
      background: var(--tui-clear);
      box-shadow: 1rem 0 var(--tui-clear), -1rem 0 var(--tui-clear);
      padding-top: 0.375rem !important;
      padding-bottom: 0 !important;
    }

    &::after {
      display: none;
    }
  }
}