@use '../../../../../../libs/components/theme/src/lib/styles/mixins' as mixins;

.flyout-responsive-wrapper {
  width: 100%;
  display: flex;
  border: 3px black solid;
}

.flyout-responsive-wrapper:not(:last-of-type) {
  border-bottom: none;
}

.flyout-responsive-box {
  height: 200px;
}

.box-1 {
  background-color: aqua;
}

.box-2 {
  background-color: plum;
}

.box-3 {
  background-color: rgb(255, 102, 0);
}

.box-4 {
  background-color: rgb(65, 141, 2);
}

.flyout-media-xs {
  .box-3 {
    flex-basis: 25%;
  }

  .box-4 {
    flex-basis: 75%;
  }
}

.flyout-media-sm {
  .box-3 {
    flex-basis: 40%;
  }

  .box-4 {
    flex-basis: 60%;
  }
}

.flyout-media-md {
  .box-3 {
    flex-basis: 50%;
  }

  .box-4 {
    flex-basis: 50%;
  }
}

.flyout-media-lg {
  .box-3 {
    flex-basis: 75%;
  }

  .box-4 {
    flex-basis: 25%;
  }
}

@include mixins.sky-host-responsive-container-xs-min() {
  .box-1 {
    flex-basis: 25%;
  }

  .box-2 {
    flex-basis: 75%;
  }
}

@include mixins.sky-host-responsive-container-sm-min() {
  .box-1 {
    flex-basis: 40%;
  }

  .box-2 {
    flex-basis: 60%;
  }
}

@include mixins.sky-host-responsive-container-md-min() {
  .box-1 {
    flex-basis: 50%;
  }

  .box-2 {
    flex-basis: 50%;
  }
}

@include mixins.sky-host-responsive-container-lg-min() {
  .box-1 {
    flex-basis: 75%;
  }

  .box-2 {
    flex-basis: 25%;
  }
}
