@import 'common/sass/variables';
@import 'common/sass/mixins';

@mixin theme-icon-showing {
  transform: translate(-50%, -50%);
  transition-delay: 100ms;
}

$toggle-height: 30px;
$toggle-width: 60px;
$toggle-control-gutter: 3px;
$toggle-control-size: $toggle-height - $toggle-control-gutter * 2;

.ThemeToggle {
  position: relative;
  height: $toggle-height;
  width: $toggle-width;
  border-radius: $toggle-height / 2;
  border: 1px solid shade-light(0.4);
  background: shade-dark(0.2);
  opacity: 0.6;
  transition: opacity 100ms ease;

  &:hover {
    opacity: 1;
  }

  &-control {
    position: absolute;
    top: 50%;
    left: $toggle-control-gutter;
    height: $toggle-control-size;
    width: $toggle-control-size;
    border-radius: 100%;
    background: color(control-bg);
    transform: translateY(-50%);
    overflow: hidden;
    transition: transform 300ms ease;

    @include theme('dark') {
      transform: translateY(-50%) translateX(-100%) translateX($toggle-width)
        translateX($toggle-control-gutter * -3);
    }

    &-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 13px;
      height: 13px;
      transform: translate(-50%, -50%) translateY(30px);
      fill: color(text-color);
      transition: transform 200ms ease;
      background-size: 100%;
      background-position: center;
      background-repeat: no-repeat;

      &.is-light {
        background-image: url('~assets/images/icon-theme-light.svg');
        opacity: 0.9;
        @include theme('light') {
          @include theme-icon-showing;
        }
      }

      &.is-dark {
        background-image: url('~assets/images/icon-theme-dark.svg');
        opacity: 0.85;
        filter: invert(1);
        @include theme('dark') {
          @include theme-icon-showing;
        }
      }
    }
  }
}