@import "../core/exports";
@import "../borders/borders.ios";
@import "./frame.ios.colors";
@import "./frame";

@include exports("frame.ios") {
  .mbsc-ios {

    &.mbsc-fr-top .mbsc-fr-btn-cont,
    &.mbsc-fr-bottom .mbsc-fr-btn-cont {
      padding-left: constant(safe-area-inset-left);
      padding-left: env(safe-area-inset-left);
      padding-right: constant(safe-area-inset-right);
      padding-right: env(safe-area-inset-right);
    }

    .mbsc-fr-w {
      position: relative;
      padding-top: 3.666667em;
      font-size: 12px;
      font-family: -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif;
    }

    .mbsc-fr-has-hdr .mbsc-fr-w {
      min-width: 25em;
    }

    &.mbsc-fr-nobtn .mbsc-fr-w,
    &.mbsc-fr-center .mbsc-fr-w {
      min-width: 22.5em;
    }

    .mbsc-fr-hdr {
      position: absolute;
      z-index: 1;
      top: 0;
      right: 0;
      left: 0;
      line-height: 1.25em;
      padding: .75em 4.375em;
      font-size: 1.333334em;
      font-weight: bold;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    &.mbsc-fr-nobtn .mbsc-fr-hdr,
    &.mbsc-fr-center:not(.mbsc-cal-liq) .mbsc-fr-hdr {
      position: relative;
      padding: .75em .5em;
      margin-bottom: -1px;
      white-space: normal;
    }

    .mbsc-fr-btn-cont {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      display: block;
    }

    .mbsc-ltr .mbsc-fr-btn-cont {
      text-align: right;
    }

    .mbsc-rtl .mbsc-fr-btn-cont {
      text-align: left;
    }

    .mbsc-fr-btn {
      height: 2.75em;
      line-height: 2.75em;
      padding: 0 .625em;
      text-align: center;
      font-size: 1.333334em;
    }

    .mbsc-fr-btn.mbsc-active {
      opacity: .5;
    }

    .mbsc-fr-btn-w {
      display: inline-block;
    }

    .mbsc-ltr .mbsc-fr-btn-c {
      float: left;
    }

    .mbsc-rtl .mbsc-fr-btn-c {
      float: right;
    }

    .mbsc-fr-btn-s .mbsc-fr-btn {
      font-weight: bold;
    }

    &.mbsc-fr-bubble .mbsc-fr-w,
    &.mbsc-fr-center .mbsc-fr-w {
      border-radius: 8px;
    }

    &.mbsc-fr-inline .mbsc-fr-w {
      border-radius: 0;
    }

    /* Bubble arrow */

    .mbsc-fr-arr {
      border-radius: 6px;
    }

    /* Top and bottom display */

    &.mbsc-fr-bottom .mbsc-fr-overlay,
    &.mbsc-fr-top .mbsc-fr-overlay {
      background: none;
    }

    /* Center display button  */

    &.mbsc-fr-center .mbsc-fr-w {
      padding-top: 0;
      padding-bottom: 3.75em;
    }

    &.mbsc-fr-center.mbsc-fr-btn-block .mbsc-fr-w {
      padding: 0;
    }

    &.mbsc-fr-center .mbsc-fr-btn-cont {
      display: table;
      top: auto;
      bottom: 0;
      border: 0;
      table-layout: fixed;
    }

    &.mbsc-fr-center .mbsc-fr-btn-w {
      display: table-cell;
      float: none;
    }

    &.mbsc-fr-center .mbsc-fr-btn-w:first-child {
      border-left: 0;
    }

    &.mbsc-fr-center .mbsc-rtl .mbsc-fr-btn-w {
      border-left: 0;
    }

    &.mbsc-fr-center .mbsc-rtl .mbsc-fr-btn-w:first-child {
      border-right: 0;
    }

    &.mbsc-fr-center .mbsc-ltr .mbsc-fr-btn-w:first-child .mbsc-fr-btn,
    &.mbsc-fr-center .mbsc-rtl .mbsc-fr-btn-w:last-child .mbsc-fr-btn {
      border-radius: 0 0 0 .5em;
    }

    &.mbsc-fr-center .mbsc-ltr .mbsc-fr-btn-w:last-child .mbsc-fr-btn,
    &.mbsc-fr-center .mbsc-rtl .mbsc-fr-btn-w:first-child .mbsc-fr-btn {
      border-radius: 0 0 .5em 0;
    }

    &.mbsc-fr-center .mbsc-fr-btn.mbsc-active {
      opacity: 1;
    }

    &.mbsc-fr-center.mbsc-fr-btn-block .mbsc-fr-btn-cont {
      position: static;
      display: block;
    }

    &.mbsc-fr-center.mbsc-fr-btn-block .mbsc-fr-btn-w {
      display: block;
      border-left: 0;
      border-right: 0;
    }

    &.mbsc-fr-center.mbsc-fr-btn-block .mbsc-fr-w .mbsc-fr-btn-w .mbsc-fr-btn {
      border-radius: 0;
    }

    &.mbsc-fr-center.mbsc-fr-btn-block .mbsc-fr-btn-w:last-child .mbsc-fr-btn {
      border-radius: 0 0 .5em .5em;
    }

    /* Inline display */

    &.mbsc-fr-inline .mbsc-fr-w {
      margin-top: -1px;
    }

    /* No buttons */

    &.mbsc-fr-nobtn .mbsc-fr-w {
      padding: 0;
    }

    &.mbsc-fr-nobtn.mbsc-fr-bottom .mbsc-fr-w {
      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
    }

    /* Desktop view */

    &.mbsc-fr-pointer {
      &.mbsc-fr .mbsc-fr-popup {
        border: 0;
      }

      .mbsc-fr-hdr {
        font-size: 1.166667em;
        line-height: 1.5em;
      }
    }
  }

  @include mbsc-ios-frame(ios, $mbsc-ios-colors);
}
