@import "./globals.mixins.ionic.scss";

// Common styles.
.text-left           { text-align: left; }
.text-right          { text-align: right; }
.text-center         { text-align: center; }
.text-justify        { text-align: justify; }
.clearfix {
    &:after {
        content: "";
        display: table;
        clear: both;
    }
}
.img-responsive {
    display: block;
    max-width: 100%;
    &[height] {
        height: auto;
    }
}

.opacity-hide { opacity: 0; }
.core-big   { font-size: 115%; }
.invisible { visibility: hidden; }

.button-no-uppercase {
    text-transform: none;
}

// Correctly inherit ion-text-wrap onto labels.
ion-item.ion-text-wrap ion-label {
    white-space: normal !important;
}


// Ionic toolbar.
ion-toolbar ion-back-button,
ion-toolbar .in-toolbar.button-clear {
    --color: var(--ion-color-primary-contrast);
    --ion-toolbar-color: var(--ion-color-primary-contrast);
}

ion-toolbar .core-navbar-button-hidden {
    display: none !important;
}

// Ionic icon.
ion-icon {
    &.icon-slash::after,
    &.icon-backslash::after {
        content: " ";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: var(--ion-color-danger);
        -webkit-mask: url("/assets/fonts/font-awesome/solid/slash.svg") no-repeat 50% 50%;
        mask: url("/assets/fonts/font-awesome/solid/slash.svg") no-repeat 50% 50%;
    }

    &.icon-slash::after {
        -webkit-transform: scale(-1, 1);
        transform: scale(-1, 1);
    }

    &.fa-fw {
        text-align: center;
        width: 1.25em;
    }
}

[dir=rtl] ion-icon.icon-flip-rtl {
    transform: scaleX(-1);
}

// Ionic alert.
ion-alert.core-alert-network-error .alert-head {
    position: relative;
    content: " ";
    background: url("/assets/fonts/font-awesome/solid/wifi.svg") no-repeat 50% 50%;
    margin: 25px auto;

    &::after {
        content: " ";
        position: absolute;
        top: -20%;
        right: -15%;
        width: 50%;
        height: 50%;
        background-color: var(--ion-color-danger);
        -webkit-mask: url("/assets/fonts/font-awesome/solid/exclamation-triangle.svg") no-repeat 50% 50%;
        mask: url("/assets/fonts/font-awesome/solid/exclamation-triangle.svg") no-repeat 50% 50%;
    }
}
[dir=rtl] ion-alert.core-alert-network-error .alert-head::after {
    right: unset;
    left: -15%;
}
ion-alert.core-nohead {
    .alert-head {
        padding-bottom: 0;
    }
}

// Ionic item divider.
ion-item-divider {
    .item-detail-icon {
        font-size: 20px;
        opacity: 0.25;
        padding-inline-end: 16px;
    }
}

// Ionic list.
ion-list.list-md {
    padding: 0;
}

// Header.
ion-tabs.hide-header ion-header {
    display: none;
}
ion-toolbar {
    ion-spinner {
        margin: 10px;
    }
}

// Modals.
.core-modal-fullscreen  .modal-wrapper {
    position: absolute;
    // @todo @include position(0 !important, null, null, 0 !important);
    display: block;
    width: 100% !important;
    height: 100% !important;
}

.core-modal-force-on-top {
    z-index: 100000 !important;
}

@media only screen and (min-height: 400px) and (min-width: 300px) {
    .core-modal-lateral {
        // @todo @include core-split-area-end();

        .modal-wrapper {
            position: absolute;
            @include position(0 !important, 0 !important, 0 !important, auto);
            display: block;
            height: 100% !important;
            width: auto;
            min-width: 300px;
            box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
        }
        ion-backdrop {
            visibility: visible;
        }
    }
}

// Hidden submit button.
.core-submit-hidden-enter {
    position: absolute;
    visibility: hidden;
    left: -1000px;
}

// Note on foot of ion-input.
.item .core-input-footnote {
    width: 100%;
    font-style: italic;
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 14px;
}

.core-selected-item {
    border-inline-start: var(--selected-item-border-width) solid var(--selected-item-color);
}

// Item styles
.item.core-selected-item {
    // TODO: Add safe area to border and RTL
    --ion-safe-area-left: calc(-1 * var(--selected-item-border-width));
}

.item.item-file {
    ion-thumbnail {
        --size: 32px;
        width: var(--size);
        height: var(--size);
    }
}

.item.core-primary-item,
.item.core-info-item,
.item.core-secondary-item,
.item.core-tertiary-item,
.item.core-success-item,
.item.core-warning-item,
.item.core-danger-item {
    --inner-border-width: 0 0 3px 0;
}
.item.core-primary-item {
    --border-color: var(--ion-color-primary);
}
.item.core-info-item,
.item.core-secondary-item {
    --border-color: var(--ion-color-secondary);
}
.item.core-tertiary-item {
    --border-color: var(--ion-color-tertiary);
}
.item.core-success-item {
    --border-color: var(--ion-color-success);
}
.item.core-warning-item {
    --border-color: var(--ion-color-warning);
}
.item.core-danger-item {
    --border-color: var(--ion-color-danger);
}
.item-dimmed {
    opacity: 0.7;
    --background: var(--gray-lighter);
}

// Extra text colors.
.text-gray {
    color: var(--gray-dark);
}

// Card styles

// Message cards.
ion-card.core-primary-card,
ion-card.core-info-card,
ion-card.core-secondary-card,
ion-card.core-tertiary-card,
ion-card.core-success-card,
ion-card.core-warning-card,
ion-card.core-danger-card {
    border-bottom: 3px solid transparent;
    ion-item::part(native) {
        --inner-border-width: 0;
    }
    ion-label {
        white-space: normal !important;
    }
}
ion-card.core-primary-card {
    border-bottom-color: var(--ion-color-primary);
    ion-icon {
        color: var(--ion-color-primary);
    }
}
ion-card.core-info-card,
ion-card.core-secondary-card {
    border-bottom-color: var(--ion-color-secondary);
    ion-icon {
        color: var(--ion-color-secondary);
    }
}
ion-card.core-tertiary-card {
    border-bottom-color: var(--ion-color-tertiary);
    ion-icon {
        color: var(--ion-color-tertiary);
    }
}
ion-card.core-success-card {
    border-bottom-color: var(--ion-color-success);
    ion-icon {
        color: var(--ion-color-success);
    }
}
ion-card.core-warning-card {
    border-bottom-color: var(--ion-color-warning);
    ion-icon {
        color: var(--ion-color-warning);
    }
}
ion-card.core-danger-card {
    border-bottom-color: var(--ion-color-danger);
    ion-icon {
        color: var(--ion-color-danger);
    }
}

// Avatar
// -------------------------
// Large centered avatar
img.large-avatar,
.large-avatar img {
    display: block;
    margin: 8px auto;
    width: var(--core-large-avatar-size);
    height: var(--core-large-avatar-size);
    max-width: var(--core-large-avatar-size);
    max-height: var(--core-large-avatar-size);
    margin-bottom: 10px;
    border-radius : 50%;
    padding: 4px;
    border: 1px solid #ddd;
    background-color: transparent;
}

ion-avatar.large-avatar {
    width: var(--core-large-avatar-size);
    height: var(--core-large-avatar-size);
}

ion-avatar ion-img, ion-avatar img {
    text-indent: -99999px;
    background-color: var(--gray-light);
}

// Wait to load before showing the image.
img[core-external-content]:not([src]) {
    visibility: hidden;
}
img[alt] {
    text-indent: -999999px;
    white-space: nowrap;
    overflow: hidden;
}

// Activity modules
.core-module-icon {
    width: auto;
    max-width: 24px;
    max-height: 24px;
}

ion-item img.core-module-icon[slot="start"] {
    margin-top: 12px;
    margin-bottom: 12px;
    margin-right: 32px;
}

[dir=rtl] ion-item img.core-module-icon[slot="start"] {
    margin-right: unset;
    margin-left: 32px;
}

ion-toolbar ion-title img.core-bar-button-image,
ion-toolbar ion-title .core-bar-button-image img {
    padding: 0;
    width: var(--core-toolbar-button-image-width);
    height: var(--core-toolbar-button-image-width);
    max-width: var(--core-toolbar-button-image-width);
    border-radius: 50%;
}

// Action sheet.
.md ion-action-sheet {
    .action-sheet-group-cancel {
        -webkit-filter: drop-shadow(0px 3px 3px rgba(var(--action-sheet-shadow-color)));
        filter: drop-shadow(0px 3px 3px rgba(var(--action-sheet-shadow-color)));
    }

    .action-sheet-title {
        border-bottom: 1px solid var(--title-border-color);
    }
}

.ios ion-action-sheet {
    .action-sheet-title {
        font-size: 16px;
    }
}

// Select.
ion-select.core-button-select,
.core-button-select {
    --background: var(--core-button-select-background);
    background: var(--background);
    --color: var(--ion-color-primary);
    color: var(--color);
    text-overflow: ellipsis;
    white-space: nowrap;
    min-height: 45px;
    overflow: hidden;
    margin: 8px;
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
    &::part(icon) {
        margin: 0 8px;
    }
    .core-button-select-text {
        margin-inline-end: auto;
    }

}
ion-button.core-button-select {
    &::part(native) {
        text-transform: none;
        font-weight: 400;
        font-size: 16px;
    }
    ion-icon {
        margin: 0 8px;
    }
    .select-icon {
        width: 19px;
        height: 19px;
        position: relative;
        opacity: 0.33;

        .select-icon-inner {
            left: 5px;
            top: 50%;
            margin-top: -2px;
            position: absolute;
            width: 0px;
            height: 0px;
            color: currentcolor;
            pointer-events: none;
            border-top: 5px solid;
            border-right: 5px solid transparent;
            border-left: 5px solid transparent;
        }
    }
}

// File uploader.
.action-sheet-button input.core-fileuploader-file-handler-input {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    min-width: 100%;
    opacity: 0;
    z-index: 100;
    cursor: pointer;
}

.core-anchor, core-format-text a {
    color: -webkit-link;
    cursor: pointer;
    text-decoration: underline;
}

// Horizontal scrolling elements
.core-horizontal-scroll {
    display: flex;
    flex-flow: nowrap;
    overflow-x: scroll;
    flex-direction: row;
}

// Text formats.
// Highlight text.
.matchtext {
    background-color: var(--text-hightlight-background-color);
}

// Text for accessibility, hidden from the view.
.accesshide {
    position: absolute;
    left: -10000px;
    font-weight: normal;
    font-size: 1em;
}