@import '../../constants/styles';

.Button {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: $button-width;
  height: $button-height;
  padding: 6px;
  // margin: 0 2px;
  font-size: 16px;
  cursor: pointer;

  @include mobile {
    // margin: 0 1px;
    min-width: $button-width-m;
    height: $button-height-m;
  }

  img {
    width: 24px;

    @include mobile {
      width: 18px;
    }
  }

  &:hover {
    background: #F6F6F6;
    background: var(--button-hover-color);

    @media (hover: none) {
      background: transparent;
    }

    @include mobile {
      background: transparent;
    }
  }

  &.active {
    background: #F0F0F0;
    background: var(--button-active-color);

    .Icon {
      color: #757575;
      color: var(--icon-active-color);
    }
  }

  &.down-arrow:after {
    content: '';
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid  #757575;
    border-top: 6px solid var(--icon-color);
    
    @include mobile {
      font-size: 10px;
    }
  }
}