/**
 * AppBuckets UI
 *
 * _Modal @ src/styles/modules/_modal.scss
 *
 * Defined at 07 ott 2020
 * Copyright Marco Cavanna • 2020
 *
 * ---
 *
 *
 */
@use 'sass:math';


/******
    Modal Base Style
******/
.modal {
  display: block;
  position: relative;
  text-align: left;
  margin: $modal-top-offset auto $modal-bottom-offset;

  background-color: $modal-background-color;
  color: $modal-color;
  border-radius: $modal-border-radius;
  padding: $modal-vertical-padding $modal-horizontal-padding;

  @include smoothShadow($modal-elevation);

  // ----
  //  Modal could have multiple size
  //  but in this case, must fix the
  //  original font-size property
  // ----
  font-size: 1em !important;
}


/******
    Modal Icon
******/
.modal.with-icon {
  padding-top: $modal-icon-size + math.div($modal-vertical-padding, 2);

  > .icon {
    position: absolute;
    font-size: $modal-icon-size;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);

    &:after {
      background-color: $cloud-light;
      @include smoothShadow($modal-elevation)
    }
  }
}


/******
    Modal Close Button
******/
.modal > .close.button {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(100%, -100%);
  margin: 0;

  .icon {
    font-size: $modal-close-button-size;
  }

  &:focus {
    box-shadow: none !important;
  }
}


/******
    Modal Header Component
******/
.modal .modal-header {
  display: flex;

  > .header {
    margin: 0;
    flex-grow: 1;

    > .header-icon {
      font-size: $modal-header-icon-size;
    }

    > .header-content {
      font-size: $modal-header-font-size;
    }
  }

  .modal-meta {
    font-weight: $semi-bold;
    color: $text-secondary;
  }
}

.modal.has-text-center .modal-header {
  flex-direction: column-reverse;

  .modal-meta {
    margin-bottom: 1em;
  }
}


/******
    Modal Content Spacing
******/
.modal .modal-header + .modal-content {
  margin-top: $modal-vertical-padding;
}


/******
    Modal Actions
******/
.modal .modal-actions {
  margin-top: $modal-vertical-padding;
  text-align: right;

  @if $modal-actions-divider-border-color {
    padding-top: $modal-vertical-padding;
    border-top: solid 1px $modal-actions-divider-border-color;
  }
}

.modal.has-text-center .modal-actions {
  text-align: center;
}


/******
    Modal Sizing
******/
.backdrop.modals {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;

  > .content {
    width: 100%;
  }
}

.modal {
  width: 100%;
  max-width: $modal-size-default;

  &.is-auto {
    width: auto;
    max-width: unset;
  }

  &.is-small {
    max-width: $modal-size-small;
  }

  &.is-large {
    max-width: $modal-size-large;
  }

  &.is-big {
    max-width: $modal-size-big;
  }

  &.is-huge {
    max-width: $modal-size-huge;
  }
}


/******
    Style Modal DatePicker
******/
.modal.day-picker {
  width: auto !important;
  max-width: fit-content !important;
}


/******
    Text Align will change Header too
******/
.modal {
  &.has-text-center {
    > .modal-header {
      .header.with-actions {
        flex-direction: column;

        /// Increase Icon Size on Centered Header
        .header-icon {
          font-size: $header-centered-icon-size;

          .icon {
            margin-right: 0;
            margin-left: 0;
            margin-bottom: $icon-spacer;
          }
        }

        /// Add spacing between Actions and Content
        .header-actions {
          margin-top: $header-actions-spacer;
        }
      }
    }
  }

  &.right {
    > .modal-header {
      .header.with-actions {
        flex-direction: row-reverse;

        .header-icon {
          .icon {
            margin-right: 0;
            margin-left: $icon-spacer;
          }
        }
      }
    }
  }
}


/******
    Set the Modal Animation on Enter / Exit
******/
.transitionable.modals.backdrop {
  > .content {
    transform: translateY($modal-transition-offset);
    will-change: transform;
    transition-property: transform;
    transition-duration: $modal-transition-duration;
    transition-timing-function: $modal-transition-timing-function;
  }

  &.entering > .content,
  &.entered > .content {
    transform: translateY(0);
  }
}