@import '@/sass/style.scss';

.SwitchButton {
  display: flex;
  height: 32px;
  overflow: hidden;
  position: relative;
  width: 100%;

  .option,
  .option--active {
    @include same-min-and-max-width(calc(50% + 1.5px));
    align-items: center;
    background-color: $very-soft-green;
    border-radius: 10px;
    border: solid 3px $mostly-black-green;
    display: block;
    display: flex;
    height: 100%;
    justify-content: center;
    position: absolute;
    transition: background-color 400ms;

    &:first-child {
      left: 0;
    }

    &:last-child {
      right: 0;
    }

    svg {
      display: block;
      height: auto;
      width: 20px;
    }
  }

  .option--active {
    background-color: $vivid-green;
  }
}
