@import '../../styles/app';

.theme-helper {
  width: $helper-width;
  position: fixed;
  right: -$helper-width;
  top: 20px;
  bottom: 20px;
  z-index: 101;
  @include transition(right $sidebar-transition-time ease-in-out);

  &.theme-helper-opened {
    right: 0;
  }

  .theme-helper-toggler {
    position: absolute;
    right: 100%;
    top: 15%;
    width: $sidebar-width-open / 4;
    margin-left: -($sidebar-width-open / 4);
    cursor: pointer;

    i {
      animation-duration: 6500ms;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
    }

    i:first-of-type {
      animation-name: spin;
      margin-right: -$spacer * 1.15;
      vertical-align: text-bottom;
    }

    i:last-of-type {
      animation-name: spin-reverse;
      vertical-align: $font-size-sm;
    }
  }

  .theme-helper-spinner {
    z-index: 200;
    border-radius: 50% 0 0 50%;
    padding: $spacer * 0.8 $spacer / 2 $spacer * 0.8 $spacer;
    font-size: $font-size-lg * 1.4;
    line-height: initial;
    box-shadow: $widget-shadow-designated;
  }

  .theme-helper-content {
    border-top-left-radius: $border-radius;
    border-bottom-left-radius: $border-radius;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    overflow: auto;
    box-shadow: $widget-shadow-designated;
    height: 100%;
  }

  .theme-settings {
    .form-group, .colors-list {
      margin-bottom: $spacer * 2;
    }
  }

  .theme-sharing {
    font-size: $font-size-lg;
    cursor: pointer;
  }

  .abc-radio-warning input[type="radio"]:not(:checked) + label::before {
    background-color: theme-color('warning');
  }

  .abc-radio-secondary input[type="radio"]:not(:checked) + label::before {
    background-color: theme-color('secondary');
  }

  .abc-radio {
    & > label {
      padding-left: 25px;

      &:before, &:after {
        outline: none !important;
        transition: $transition-base;
        margin-left: 4px;
      }
    }
  }

  @keyframes spin {
    0% {
      transform:rotate(0deg);
    }
    50% {
      transform:rotate(360deg);
    }
  }

  @keyframes spin-reverse {
    0% {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(-360deg);
    }
  }
}
