@import '../tools/mixins/position';
@import '../tools/mixins/transition';
@import '../settings/variables';
@import '../tools/mixins/breakpoints';

.c-toggle-button {
  @include transition(margin);
  background-color: $color-background;
  border-radius: 50%;
  width: 0.75rem;
  height: 0.75rem;
  margin: 0.375em 0 0 0.375em;

  &--active {
    margin-left: 1.5em;
  }

  @include media-breakpoint-up(lg) {
    width: 0.5rem;
    height: 0.5rem;
    margin: $margin-tiny 0 0 $margin-tiny;

    &--active {
      margin-left: 1em;
    }
  }

  &__wrapper {
    @include transition(background-color);
    height: 1.5em;
    width: 2.625em;
    background-color: $color-separator;
    border-radius: 6.25em;

    @include media-breakpoint-up(lg) {
      height: 1em;
      width: 1.75em;
    }

    &--active {
      background-color: $color-primary;
    }
  }
}