@import '~styles/config';

.viewToggle {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  z-index: 2;

  @media (min-width: $min-tablet) {
    justify-content: center;
    max-width: 80px;
  }

  @media (min-width: $min-desktop) {
    padding-left: $gutter;
    max-width: 110px;
  }


  &__button {
    @include reset-button();
    display: flex;
    align-items: center;
    justify-content: center;

    height: 40px;
    width: 40px;

    cursor: pointer;
  }

  &__svg {
    height: 22px;
    fill: $color-grey400;

    .selected & {
      fill: $color-dark;
    }
  }

  &.posRight {
    @media (min-width: $min-tablet) {
      margin-left: auto;
    }
  }
}