@use "sass:math";

@import '~styles/config';

.openingHours {
  margin-bottom: $gutter*2;

  &__day {
    @include grid-row;
    flex-wrap: wrap;

    margin-bottom: $gutter;

    @media (min-width: $min-desktop) {
      flex-wrap: nowrap;
    }
  }

  &__dayName {
    @include grid-col(percentage(math.div(6, 12)));

    @media (max-width: $max-desktop) {
      margin-bottom: $gutter;
    }

    @media (min-width: $min-desktop) {
      width: percentage(math.div(3, 12));
    }
  }

  &__switch {
    @include grid-col(percentage(math.div(6, 12)));

    @media (max-width: $max-desktop) {
      display: flex;
      flex-direction: row-reverse;
    }

    @media (min-width: $min-desktop) {
      width: percentage(math.div(2, 12));
    }

    &.closed {
      @media (max-width: $max-desktop) {
        order: 3;
        width: auto;
      }
    }
  }

  &__switch + &__closed {
    @media (max-width: $max-desktop) {
      order: 2;
      flex-grow: 1;

      width: 25%;
      text-align: right;
    }
  }

  &__hours {
    @include grid-col;

    @media (min-width: $min-desktop) {
      width: percentage(math.div(7, 12));
    }
  }

  &__closed {
    @include grid-col;

    @media (min-width: $min-desktop) {
      width: percentage(math.div(7, 12));
    }
  }

  &__period {
    @include grid-row;
  }

  &__from {
    @include grid-col(percentage(math.div(3, 7)));
  }

  &__to {
    @include grid-col(percentage(math.div(3, 7)));
  }

  &__close {
    @include grid-col(percentage(math.div(1, 7)));

    position: relative;

    &Button {
      position: absolute;
      left: 0;
    }
  }

  &__add {
    margin-bottom: $gutter;
  }

}