@import '../../../../globals/variables';
@import '../../../../globals/mixins';
@import '../../../../globals/breakpoints';

.option-menu {
  position: relative;

  &__items {
    display: flex;
    flex-direction: column;
  }

  .button-burger {
    height: 2.563rem;
    padding: 0.365rem;
    width: 2.563rem;
  }

  .button-icon svg rect {
    color: $ads-color-main;
    stroke: currentcolor;
    stroke-width: 1;
  }

  .button-icon svg {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: space-around;
    width: 100%;
  }

  .button__icon {
    display: flex;
    height: 100%;
    width: 100%;

    svg {
      height: 1.5rem;
    }
  }

  .variable__button--primary {
    height: 100%;
    padding: 0.375rem;
    width: 2.563rem;
  }

  @media (max-width: map-get($ads-breakpoints-scales, 'medium')) {
    &__items {
      border: 2px solid lightblue;
      flex-direction: row;
      height: 2.375rem;
      margin: 0 2.5rem;
      margin-top: -2.6rem;
      width: 10rem;
    }
  }
}
