{"version":3,"file":"3361.6453ddb57adcf24c56c2.css","mappings":"AAoVA,8BACI,QAEI,kCAGJ,QAEI,iCAGJ,YAGI,kCAGJ,QAEI,kCCpWJ,gCACI,kBACA,QACA,SACA,YACA,2CAGJ,iCACI,gBACA,iBACA,mBAGJ,gCACI,4BAGJ,gCACI,iBACA,oBACA,4BAGJ,gEAEI,aACA,mBACA,kBAGJ,4CACI,mBACA,YAEA,yDACI,oCAGJ,+CACI,SACA,cACA,eACA,iBACA,iBAGJ,wDDoLJ,YACA,eACA,eACA,iBCpLQ,UACA,YACA,iBACA,oCACA,cACA,eAIR,8BACI,cACA,gBACA,gBACA,eACA,mBACA,cAGJ,wBACI,kBAEA,kCACI,gBAGJ,+BACI,kBACA,eACA,iBACA,iBAGJ,qCACI,SACA,eAGJ,4CACI,SACA,mBACA,eAGJ,mCACI,cACA,mBACA,yBACA,eACA,iBACA,yBAKJ,qCDjBJ,oBACA,mBACA,SACA,4CACA,kBACA,uBACA,gBACA,6BA4IA,YACA,eACA,eACA,iBA7IA,8CACI,uDACA,kDAGJ,mDACI,4CAGJ,oDACI,4CAGJ,uCACI,aACA,eAEA,+CACI,iBCLJ,mCDWJ,kBACA,oBACA,mBACA,uBACA,SACA,4BACA,kBACA,0BACA,gBACA,6BAyGA,YACA,eACA,eACA,iBC5HQ,iBDkBR,yCACI,4FAGJ,0CACI,4FAGJ,yCACI,sBACA,mDACA,aAGJ,4CACI,uDACA,kDACA,mBAGJ,qCACI,aACA,e","sources":["webpack://mattermost-webapp/./sass/utils/_mixins.scss","webpack://mattermost-webapp/./components/delinquency_modal/delinquency_modal.scss"],"sourcesContent":["@charset \"utf-8\";\n\n@mixin file-icon($path) {\n    background-image: url($path);\n    background-position: center;\n    background-repeat: no-repeat;\n    background-size: 32px 40px;\n}\n\n@mixin alpha-property($property, $color, $opacity) {\n    #{$property}: rgba($color, $opacity);\n}\n\n@mixin font-smoothing($value: antialiased) {\n    @if $value == antialiased {\n        -webkit-font-smoothing: antialiased;\n        -moz-osx-font-smoothing: grayscale;\n    }\n\n    @else {\n        -webkit-font-smoothing: subpixel-antialiased;\n        -moz-osx-font-smoothing: auto;\n    }\n}\n\n@mixin cursor($value) {\n    cursor: -webkit-$value;\n    cursor: zoom-$value;\n}\n\n// From https://gist.github.com/kaelig/7528069\n@mixin text-clamp($lines: 2, $line-height: false) {\n    display: -webkit-box;\n    overflow: hidden;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: $lines;\n\n    // Fallback for non-Webkit browsers\n    // (won't show `…` at the end of the block)\n    @if $line-height {\n        max-height: $line-height * $lines * 1px;\n    }\n}\n\n@mixin button-style--none {\n    padding: 0;\n    border: none;\n    background: transparent;\n\n    &:focus {\n        outline: 0;\n        text-decoration: none;\n    }\n\n    &.btn {\n        padding: 6px 12px;\n    }\n\n    &.btn--block {\n        width: 100%;\n        text-align: left;\n    }\n\n    &:hover,\n    &:active {\n        text-decoration: none;\n    }\n}\n\n@mixin fit-content {\n    width: fit-content;\n    width: -moz-fit-content;\n}\n\n@mixin clearfix {\n    overflow: hidden;\n    *zoom: 1;\n}\n\n@mixin pie-clearfix {\n    &::after {\n        display: table;\n        clear: both;\n        content: \"\";\n    }\n\n    *zoom: 1;\n}\n\n@mixin tertiary-button {\n    display: inline-flex;\n    align-items: center;\n    border: 0;\n    background: rgba(var(--button-bg-rgb), 0.08);\n    border-radius: 4px;\n    color: var(--button-bg);\n    font-weight: 600;\n    transition: all 0.15s ease-out;\n\n    &:disabled {\n        background: rgba(var(--center-channel-color-rgb), 0.08);\n        color: rgba(var(--center-channel-color-rgb), 0.32);\n    }\n\n    &:hover:enabled {\n        background: rgba(var(--button-bg-rgb), 0.12);\n    }\n\n    &:active:enabled {\n        background: rgba(var(--button-bg-rgb), 0.16);\n    }\n\n    i {\n        display: flex;\n        font-size: 18px;\n\n        &::before {\n            margin: 0 7px 0 0;\n        }\n    }\n}\n\n@mixin primary-button {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border: 0;\n    background: var(--button-bg);\n    border-radius: 4px;\n    color: var(--button-color);\n    font-weight: 600;\n    transition: all 0.15s ease-out;\n\n    &:hover {\n        background: linear-gradient(0deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08)), var(--button-bg);\n    }\n\n    &:active {\n        background: linear-gradient(0deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.16)), var(--button-bg);\n    }\n\n    &:focus {\n        box-sizing: border-box;\n        border: 2px solid var(--sidebar-text-active-border);\n        outline: none;\n    }\n\n    &:disabled {\n        background: rgba(var(--center-channel-color-rgb), 0.08);\n        color: rgba(var(--center-channel-color-rgb), 0.32);\n        cursor: not-allowed;\n    }\n\n    i {\n        display: flex;\n        font-size: 18px;\n    }\n}\n\n@mixin secondary-button {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid var(--denim-button-bg);\n    background: var(--center-channel-bg);\n    border-radius: 4px;\n    color: var(--button-bg);\n    font-weight: 600;\n    transition: all 0.15s ease-out;\n\n    &:hover {\n        background: rgba(var(--denim-button-bg-rgb), 0.08);\n    }\n\n    &:active {\n        background: rgba(var(--denim-button-bg-rgb), 0.16);\n    }\n\n    &:focus {\n        box-sizing: border-box;\n        border: 2px solid var(--sidebar-text-active-border);\n        outline: none;\n    }\n\n    &:disabled {\n        border: rgba(var(--center-channel-color-rgb), 0.32);\n        color: rgba(var(--center-channel-color-rgb), 0.32);\n        cursor: not-allowed;\n    }\n\n    i {\n        display: flex;\n        font-size: 18px;\n    }\n}\n\n@mixin button-focus {\n    &:focus {\n        border-width: 0;\n        box-shadow: inset 0 0 0 2px var(--sidebar-text-active-border);\n    }\n\n    &:focus:not(:focus-visible) {\n        border-width: 0;\n        box-shadow: none;\n    }\n\n    &:focus-visible {\n        border-width: 0;\n        box-shadow: inset 0 0 0 2px var(--sidebar-text-active-border);\n    }\n}\n\n@mixin button-xsmall {\n    height: 24px;\n    padding: 4px 6px;\n    font-size: 11px;\n    line-height: 16px;\n}\n\n@mixin button-small {\n    height: 32px;\n    padding: 0 16px;\n    font-size: 12px;\n    line-height: 10px;\n}\n\n@mixin button-medium {\n    height: 40px;\n    padding: 0 20px;\n    font-size: 14px;\n    line-height: 14px;\n}\n\n@mixin button-large {\n    height: 48px;\n    padding: 0 24px;\n    font-size: 16px;\n    line-height: 18px;\n}\n\n@mixin link {\n    border: none;\n    box-shadow: none;\n    color: var(--link-color);\n    font-size: 12px;\n    font-weight: 600;\n    line-height: 16px;\n\n    &:hover,\n    &:active,\n    &:focus {\n        text-decoration-line: underline;\n    }\n\n    &:disabled {\n        color: rgba(var(--center-channel-color-rgb), 0.32);\n        cursor: not-allowed;\n        text-decoration: none;\n    }\n}\n\n@mixin simple-in-and-out-after($classPrefix, $transition_time: 300ms) {\n    .#{$classPrefix}--enter-from-after {\n        &-enter {\n            transform: translateY(-100vh);\n        }\n\n        &-enter-active {\n            transform: translateY(0);\n            transition: transform $transition_time ease-in-out;\n        }\n\n        &-enter-done {\n            transform: translateY(0);\n        }\n    }\n\n    .#{$classPrefix}--exit-to-after {\n        &-exit {\n            transform: translateY(0);\n        }\n\n        &-exit-active {\n            transform: translateY(-100vh);\n            transition: transform $transition_time ease-in-out;\n        }\n\n        &-exit-done {\n            transform: translateY(-100vh);\n        }\n    }\n}\n\n@mixin simple-in-and-out-before($classPrefix, $transition_time: 300ms) {\n    .#{$classPrefix}--enter-from-before {\n        &-enter {\n            transform: translateY(100vh);\n        }\n\n        &-enter-active {\n            transform: translateY(0);\n            transition: transform $transition_time ease-in-out;\n        }\n\n        &-enter-done {\n            transform: translateY(0);\n        }\n    }\n\n    .#{$classPrefix}--exit-to-before {\n        &-exit {\n            transform: translateY(0);\n        }\n\n        &-exit-active {\n            transform: translateY(100vh);\n            transition: transform $transition_time ease-in-out;\n        }\n\n        &-exit-done {\n            transform: translateY(100vh);\n        }\n    }\n}\n\n@mixin simple-in-and-out($classPrefix, $transition_time: 300ms) {\n    @include simple-in-and-out-before($classPrefix, $transition_time);\n    @include simple-in-and-out-after($classPrefix, $transition_time);\n}\n\n@mixin shake-horizontally {\n    animation: shake-horizontally 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;\n    backface-visibility: hidden;\n    perspective: 1000px;\n    transform: translate3d(0, 0, 0);\n}\n\n@keyframes shake-horizontally {\n    10%,\n    90% {\n        transform: translate3d(-1px, 0, 0);\n    }\n\n    20%,\n    80% {\n        transform: translate3d(2px, 0, 0);\n    }\n\n    30%,\n    50%,\n    70% {\n        transform: translate3d(-4px, 0, 0);\n    }\n\n    40%,\n    60% {\n        transform: translate3d(4px, 0, 0);\n    }\n}\n","@import 'sass/utils/_mixins';\n\n.DelinquencyModal {\n    .modal-dialog {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        margin: auto;\n        transform: translate(-50%, -50%) !important;\n    }\n\n    .modal-content {\n        max-width: 512px;\n        max-height: 465px;\n        border-radius: 12px;\n    }\n\n    .modal-header {\n        border-radius: 12px 12px 0 0;\n    }\n\n    .modal-footer {\n        padding-top: 24px;\n        padding-bottom: 24px;\n        border-radius: 0 0 12px 12px;\n    }\n\n    .modal-header,\n    .modal-footer {\n        display: flex;\n        padding-right: 32px;\n        padding-left: 32px;\n    }\n\n    .DelinquencyModal__header {\n        align-items: center;\n        border: none;\n\n        &.modal-header {\n            background: var(--center-channel-bg);\n        }\n\n        h3 {\n            margin: 0;\n            color: rgba(63, 67, 80, 1);\n            font-size: 22px;\n            font-weight: bold;\n            line-height: 28px;\n        }\n\n        .icon-close {\n            @include button-medium;\n\n            padding: 0;\n            border: none;\n            margin-left: auto;\n            background: var(--center-channel-bg);\n            color: rgba(63, 67, 80, 1);\n            font-size: 24px;\n        }\n    }\n\n    .modal-body {\n        display: block;\n        overflow: hidden;\n        max-height: none;\n        padding: 0 32px;\n        margin-bottom: 28px;\n        color: rgba(63, 67, 80, 1);\n    }\n\n    &__body {\n        text-align: center;\n\n        &__freemium {\n            text-align: left;\n        }\n\n        &__title {\n            margin-bottom: 8px;\n            font-size: 22px;\n            font-weight: bold;\n            line-height: 28px;\n        }\n\n        &__information {\n            margin: 0;\n            font-size: 12px;\n        }\n\n        &__limits-information {\n            margin: 0;\n            margin-bottom: 24px;\n            font-size: 12px;\n        }\n\n        &__subheader {\n            display: block;\n            margin-bottom: 16px;\n            color: rgba(63, 67, 80, 0.56);\n            font-size: 10px;\n            font-weight: bold;\n            text-transform: uppercase;\n        }\n    }\n\n    &__footer {\n        &--secondary {\n            @include tertiary-button;\n            @include button-large;\n        }\n\n        &--primary {\n            @include primary-button;\n            @include button-large;\n\n            margin-left: auto;\n        }\n    }\n}\n"],"names":[],"sourceRoot":""}