/* === Modals === */
@modalBgColor:#e8e8e8;
@modalButonColor : @color-primary;
@modalButonBg: @modalBgColor;
@modalButonActiveBg:#d4d4d4;
@modalDuration:400ms;
@actionsModalDuration:300ms;
@actionsModalButtonBg: rgba(243,243,243,0.95);
@actionsModalActiveButtonBg:#dcdcdc;
@popupDuration: 400ms;
@gray: #8e8e93;
.modal-overlay, .preloader-indicator-overlay, .popup-overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    z-index: 10600;
    visibility: hidden;
    opacity: 0;
    transition-duration: @modalDuration;
    &.modal-overlay-visible {
        visibility: visible;
        opacity: 1;
    }
}
.popup-overlay {
    z-index: 10200;
}
.modal {
    width: 13.5rem;
    position: absolute;
    z-index: 11000;
    left: 50%;
    margin-left: -6.75rem;
    margin-top: 0;
    top: 50%;
    text-align: center;
    border-radius: 0.35rem;
    opacity: 0;
    transform: translate3d(0,0,0) scale(1.185);
    transition-property: transform, opacity;
    color: @color-text;
    display: none;
    &.modal-in {
        opacity: 1;
        transition-duration: @modalDuration;
        transform: translate3d(0,0,0) scale(1);
    }
    &.modal-out {
        opacity: 0;
        z-index: 11000-1;
        transition-duration: @modalDuration;
        transform: translate3d(0,0,0) scale(0.815);
    }
}
.modal-inner {
    padding: 0.75rem;
    .hairline(bottom, #b5b5b5);
    border-radius: 0.35rem 0.35rem 0 0;
    position: relative;
    background: @modalBgColor;
}
.modal-title {
    font-weight: 500;
    font-size: 0.9rem;
    text-align: center;
    +.modal-text {
        margin-top: 0.25rem;
    }
}
.modal-buttons {
    height: 2.2rem;
    overflow: hidden;
    .flexbox();
    .justify-content(center);
    &.modal-buttons-vertical {
        display: block;
        height: auto;
    }
}
.modal-button {
    width: 100%;
    padding: 0 0.25rem;
    height: 2.2rem;
    font-size: 0.85rem;
    line-height: 2.2rem;
    text-align: center;
    color: @modalButonColor;
    background: @modalButonBg;
    display: block;
    position: relative;
    white-space: nowrap;
    text-overflow:ellipsis;
    overflow: hidden;
    cursor: pointer;
    box-sizing: border-box;
    .hairline(right, #b5b5b5);
    -webkit-box-flex:1;
    -ms-flex:1;
    &:first-child {
        border-radius: 0 0 0 0.35rem;
    }
    &:last-child {
        .hairline-remove(right);
        border-radius: 0 0 0.35rem 0;
    }
    &:first-child:last-child {
        border-radius: 0 0 0.35rem 0.35rem;
    }
    &.modal-button-bold {
        font-weight: 500;
    }
    html:not(.watch-active-state) &:active, &.active-state {
        background: @modalButonActiveBg;
    }
    .modal-buttons-vertical & {
        .hairline-remove(right);
        .hairline-remove(top);
        .hairline(bottom, #b5b5b5);
        border-radius: 0;
        &:last-child {
            border-radius: 0 0 0.35rem 0.35rem;
            .hairline-remove(bottom);
        }
    }
}
.modal-no-buttons {
    .modal-inner {
        border-radius: 0.35rem;
        .hairline-remove(bottom);
    }
    .modal-buttons {
        display: none;
    }
}
// Action sheet
.actions-modal {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 11000;
    width: 100%;
    transform: translate3d(0,100%,0);
    &.modal-in {
        transition-duration: @actionsModalDuration;
        transform: translate3d(0,0,0);
    }
    &.modal-out {
        z-index: 11000-1;
        transition-duration: @actionsModalDuration;
        transform: translate3d(0,100%,0);
    }
}
.actions-modal-group {
    margin: 0.4rem;
}
.actions-modal-button, .actions-modal-label {
    width: 100%;
    text-align: center;
    font-weight: normal;
    margin: 0;
    background: @actionsModalButtonBg;
    box-sizing: border-box;
    display: block;
    position: relative;
    .hairline(bottom, #d2d2d6);
    a {
        text-decoration: none;
        color: inherit;
    }
    b {
        font-weight: 500;
    }
    &.actions-modal-button-bold {
        font-weight: 500;
    }
    &.actions-modal-button-danger {
        color: @color-danger;
    }
    &.color-danger {
      color: @color-danger;
    }
    &.bg-danger {
      background: @color-danger;
      color: white;
      &:active {
      background: @color-danger-active;
      }
    }
    &:first-child {
        border-radius: 0.2rem 0.2rem 0 0;
    }
    &:last-child {
        .hairline-remove(bottom);
        border-radius: 0 0 0.2rem 0.2rem;
    }
    &:first-child:last-child {
        border-radius: 0.2rem;
    }
    &.disabled {
        opacity: 0.95;
        color:@gray;
    }
}
.actions-modal-button {
    cursor: pointer;
    line-height: 2.15rem;
    font-size:1rem;
    color: @color-primary;
    &:active, &.active-state {
        background: @actionsModalActiveButtonBg;
    }
}
.actions-modal-label {
    font-size: 0.7rem;
    line-height: 1.3;
    min-height: 2.2rem;
    padding: 0.4rem 0.5rem;
    color: @color-text-secondary;
    .flexbox();
    .justify-content(center);
    .align-items(center);
}
// Prompt
input.modal-text-input {
    box-sizing: border-box;
    height: 1.5rem;
    background: #fff;
    margin: 0;
    margin-top: 0.75rem;
    padding: 0 0.25rem;
    border: 1px solid #a0a0a0;
    border-radius: 0.25rem;
    width: 100%;
    font-size: 0.7rem;
    font-family: inherit;
    display: block;
    box-shadow: 0 0 0 rgba(0,0,0,0);
    appearance: none;
    + input.modal-text-input {
        margin-top: 0.25rem;
    }
    &.modal-text-input-double {
        border-radius: 0.25rem 0.25rem 0 0;
        + input.modal-text-input {
            margin-top: 0;
            border-top: 0;
            border-radius: 0 0 0.25rem 0.25rem;
        }
    }
}

// Popup
.popup, .login-screen {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 10400;
    background: #fff;
    box-sizing: border-box;
    display: none;
    .scrollable();
    transition-property: transform;
    transform: translate3d(0,100%,0);
    &.modal-in, &.modal-out {
        transition-duration: @popupDuration;
    }
    &.modal-in {
        transform: translate3d( 0,0,0);
    }
    &.modal-out {
        transform: translate3d( 0,100%,0);
    }
}
.login-screen.modal-in, .login-screen.modal-out {
    display: block;
}

html.with-statusbar-overlay {
    // iPhone with statusbar overlay
    .popup {
        height: ~"-webkit-calc(100% - 1rem)";
        height: ~"calc(100% - 1rem)";
        top: 1rem;
    }
    .popup-overlay {
        z-index: 9800;
    }
    @media all and (max-width:629px), (max-height:629px) {
        .popup {
            height: ~"-webkit-calc(100% - 1rem)";
            height: ~"calc(100% - 1rem)";
            top: 1rem;
        }
        .popup-overlay {
            z-index: 9800;
        }
    }
    .login-screen, .popup.tablet-fullscreen {
        height: ~"-webkit-calc(100% - 1rem)";
        height: ~"calc(100% - 1rem)";
        top: 1rem;
    }
}

//Preloaders modals
.modal .preloader {
    width: 1.7rem;
    height: 1.7rem;
}
.preloader-indicator-overlay {
    visibility: visible;
    opacity: 0;
    background: none;
}
.preloader-indicator-modal {
    position: absolute;
    left: 50%;
    top: 50%;
    padding: 0.4rem;
    margin-left: -1.25rem;
    margin-top: -1.25rem;
    background: rgba(0,0,0,0.8);
    z-index: 11000;
    border-radius: 0.25rem;
    .preloader {
        display: block;
        width: 1.7rem;
        height: 1.7rem;
    }
}

// Picker Modal
.picker-modal {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 13rem;
    z-index: 11500;
    display: none;
    transition-property: transform;
    background: #cfd5da;
    transform: translate3d( 0,100%,0);
    &.modal-in, &.modal-out {
        transition-duration: 400ms;
    }
    &.modal-in {
        transform: translate3d(0,0,0);
    }
    &.modal-out {
        transform: translate3d(0,100%,0);
    }
    .picker-modal-inner {
        height: 100%;
        position: relative;
    }
    .toolbar {
        .hairline(top, @color-text-gray);
        position: relative;
        width: 100%;
        + .picker-modal-inner {
            height: ~"-webkit-calc(100% - 2.2rem)";
            height: ~"-moz-calc(100% - 2.2rem)";
            height: ~"calc(100% - 2.2rem)";    
        }
    }
    &.picker-modal-inline {
        display: block;
        position: relative;
        background: none;
        z-index: inherit;
        transform: translate3d(0,0,0);
        .toolbar {
            .hairline-remove(top);
            .hairline(bottom, @color-text-gray);
        }
    }
}

//toast

.toast {
  background: rgba(0, 0, 0, .8);
  border-radius: 1rem;
  color: white;
  padding: 0 .8rem;
  height: 2rem;
  line-height: 2rem;
  font-size: 0.8rem;
  width: auto;
}