@use "./mixins" as *;

.ui-theme-switcher {
  $root: &;

  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 6px;

  > div {
    background-color: var(--theme-switcher-icon-color);
    @include mask(url("./images/24_dark-mode.svg"), 24px);
  }

  &.dark {
    > div {
      @include mask(url("./images/24_light-mode.svg"), 24px);
    }

    &:hover {
      --theme-switcher-icon-color: var(--color-ic-link);
    }
  }

  &:hover {
    background-color: var(--color-sec-hover-white);
  }
}