@use '../../token/breakpoint/breakpoint';

$tikui-dual-section-horizontal-spacing: 200px !default;
$tikui-dual-section-vertical-spacing: 100px !default;
$tikui-dual-section-medium-breakpoint: breakpoint.$tikui-breakpoint-medium !default;

@mixin tikui-dual-section-size($size) {
  $size-pixel: $size * 1px;

  &.-s#{$size}.-right-to-left > &--slot {
    margin-left: $size-pixel;
  }

  &.-s#{$size}.-left-to-right > &--slot {
    margin-right: $size-pixel;
  }
}

.tikui-dual-section {
  display: flex;
  align-items: center;

  @include tikui-dual-section-size(100);
  @include tikui-dual-section-size(200);

  &--slot {
    flex-basis: 0;
    flex-grow: 1;
  }

  &.-right-to-left {
    flex-direction: row-reverse;
  }

  &.-right-to-left > &--slot {
    &:first-child {
      text-align: left;
    }

    &:last-child {
      margin-left: 0;
      text-align: right;
    }
  }

  &.-left-to-right {
    flex-direction: row;
  }

  &.-left-to-right > &--slot {
    &:first-child {
      text-align: right;
    }

    &:last-child {
      margin-right: 0;
      text-align: left;
    }
  }

  &.-distant.-right-to-left > &--slot {
    &:first-child {
      text-align: right;
    }

    &:last-child {
      text-align: left;
    }
  }

  &.-distant.-left-to-right > &--slot {
    &:first-child {
      text-align: left;
    }

    &:last-child {
      text-align: right;
    }
  }
}

@media screen and (max-width: $tikui-dual-section-medium-breakpoint) {
  .tikui-dual-section {
    display: block;

    &.-distant.-right-to-left > &--slot,
    &.-distant.-left-to-right > &--slot,
    &.-right-to-left > &--slot,
    &.-left-to-right > &--slot {
      &:first-child,
      &:last-child {
        margin: 0 0 $tikui-dual-section-vertical-spacing;
        text-align: center;
      }

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}