codevise/pageflow

.emulation_mode_button {
  position: relative;
  float: left;
  cursor: pointer;

  &-wrapper {
    width: 110px;
    height: 30px;
  }

  &-desktop_icon,
  &-phone_icon {
    @include background-icon-center($color: var(--ui-on-surface-color), $font-size: 16px);
    width: 40px;
    height: 100%;
  }

  &-desktop_icon {
    @include monitor-icon;
    float: left;
  }

  &-phone_icon {
    @include mobile-icon;
    float: right;
  }

  &-track,
  &-thumb {
    position: absolute;
  }

  &-track {
    background-color: var(--ui-on-surface-color-lighter);
    top: 8px;
    left: 40px;
    border-radius: 7px;
    width: 34px;
    height: 14px;
  }

  &-thumb {
    background-color: var(--ui-primary-color);
    top: 5px;
    left: 37px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
    transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  }

  &.active .emulation_mode_button-thumb {
    transform: translateX(20px);
  }

  &.disabled {
    .emulation_mode_button-wrapper {
      opacity: 0.4;
    }
  }
}