{"version":3,"file":"3434.2df851c7248340918882.css","mappings":"AA0EA,YAvDI,kBAdW,CAeX,aAjBG,CAmBH,mBACI,wBArBQ,CA2EZ,qBACI,mBACA,WAGJ,mBAjDA,kBACA,iBACA,aAgDiC,CA7CjC,UACA,YACA,oBA2CiC,CA1CjC,YAII,kHAEI,aAIR,2BACI,kBACA,SAvBa,CAwBb,UAxBa,CAyBb,UAxBS,CAyBT,WAzBS,CA0BT,gBACA,mBACA,qBAGJ,0BACI,iCAEA,kCACI,WApCS,CAqCT,aACA,qBAkBR,mBArDA,kBACA,eACA,aAvBkB,CA0BlB,UACA,YACA,oBA5BkB,CA6BlB,YAII,kHAEI,aAIR,2BACI,kBACA,kBAvBa,CAwBb,mBAxBa,CAyBb,qBAxBS,CAyBT,sBAzBS,CA0BT,gBACA,mBACA,qBAGJ,0BACI,iCAEA,kCACI,oBApCS,CAqCT,aACA,qBAsBR,mBAzDA,kBACA,eACA,WAwDgC,CArDhC,UACA,YACA,kBAmDgC,CAlDhC,YAII,kHAEI,aAIR,2BACI,kBACA,kBAvBa,CAwBb,mBAxBa,CAyBb,oBAxBS,CAyBT,qBAzBS,CA0BT,gBACA,mBACA,qBAGJ,0BACI,iCAEA,kCACI,oBApCS,CAqCT,aACA,qBA0BR,qBACI,WACA,iBACA,gBAEA,yBACI,0BAGJ,wBACI,0BAKZ,oBA1FI,sDA6FS,CA5FT,kCA2FY,CAzFZ,2BACI,0CA0FY,CAGhB,6BACI,mBACA,WAGJ,2BAxFA,kBACA,iBACA,aAuFiC,CApFjC,UACA,YACA,oBAkFiC,CAjFjC,YAII,kJAEI,aAIR,mCACI,kBACA,SAvBa,CAwBb,UAxBa,CAyBb,UAxBS,CAyBT,WAzBS,CA0BT,gBACA,mBACA,qBAGJ,kCACI,iCAEA,0CACI,WApCS,CAqCT,aACA,qBAyDR,2BA5FA,kBACA,eACA,aAvBkB,CA0BlB,UACA,YACA,oBA5BkB,CA6BlB,YAII,kJAEI,aAIR,mCACI,kBACA,kBAvBa,CAwBb,mBAxBa,CAyBb,qBAxBS,CAyBT,sBAzBS,CA0BT,gBACA,mBACA,qBAGJ,kCACI,iCAEA,0CACI,oBApCS,CAqCT,aACA,qBA6DR,2BAhGA,kBACA,eACA,WA+FgC,CA5FhC,UACA,YACA,kBA0FgC,CAzFhC,YAII,kJAEI,aAIR,mCACI,kBACA,kBAvBa,CAwBb,mBAxBa,CAyBb,oBAxBS,CAyBT,qBAzBS,CA0BT,gBACA,mBACA,qBAGJ,kCACI,iCAEA,0CACI,oBApCS,CAqCT,aACA,qBAiER,6BACI,WACA,iBACA,gBAEA,iCACI,0BAGJ,gCACI,0BC5IR,iBACI,kCAEA,gCACI,iDAIR,iBACI,aACA,mBACA,QAEA,6BACI,aAGJ,4BACI,gBAGJ,kCACI,WAUJ,sBACI,kBACA,oBACA,SAEA,kDACI,kBACA,aACA,YACA,mBACA,eACA,wDACA,kDACA,mBACA,6BAEA,+FACI,UAEA,yGACI,iBACA,eACA,gBAGJ,kIACI,UACA,eAGJ,4HACI,aACA,eAEA,sIACI,e;ACpE5B,mBACI,WACA,iBACA,gBAEA,iCACI,aACA,YACA,iEACA,oEACA,kCACA,eAEA,iGAEI,aACA,UACA,mBACA,YACA,iBAGJ,sCACI,aAKZ,iBACI,aAEA,mCACI,aACA,UACA,mBAEA,0CACI,mBACA,uBACA,sBAGJ,yCACI,mBAGJ,8CACI,qBACA,WACA,YACA,YACA,wBACA,4BACA,mBAEA,kDACI,WACA,YACA,WACA,yBAIR,+CACI,qBACA,WACA,YACA,YACA,wBACA,gCACA,mBAEA,mDACI,aACA,cACA,YACA,yBAIR,2CACI,wBAGJ,wCACI,gBAIR,yBACI,UACA,mBACA,aAKJ,6BACI,mBACA,kDACA,eACA,gBAKI,qEACI,8BAOJ,iEACI,6BAEA,qEACI,WACA,YACA,iC;ACzHhB,wBACI,kCACA,yB;ACGA,qDACI,+BAEA,oIAMI,+BAJA,gJACI,+BAMR,gFACI,2CAEA,+FACI,gBAQR,gFACI,gBAEA,+FACI,gBAMhB,+CACI,gBACA,YACA,wDACA,oCACA,gBACA,kDACA,gBAEA,wHAMI,YACA,iBACA,8BACA,gBAPA,oIACI,8BASA,wPACI,gBAEA,sRACI,gBAMhB,0EACI,6BAEA,8EACI,UAKZ,uDACI,UACA,cAGJ,mDACI,gBACA,kDAGJ,6CACI,gBACA,kCAEA,4DACI,gBAIR,wBACI,eAGJ,4CACI,aACA,oCACA,4DACA,kCAGJ,iDACI,UAGJ,mDACI,aACA,YACA,mBACA,uBACA,aACA,0BAGJ,8CACI,aACA,YACA,mBACA,aACA,eACA,QAEA,0DACI,kDACA,kBAEA,+DACI,WAGJ,iEACI,gBAIR,0DACI,0BAGJ,yDACI,0BAGJ,0DACI,4CAGJ,gEACI,gBACA,eAGJ,wDACI,WAEA,gEACI,YACA,YAIR,wDACI,WAEA,gEACI,YACA,WAGJ,+DACI,YACA,WAIR,8DACI,qBACA,WACA,YACA,YACA,iBACA,4BACA,mBAEA,kEACI,WACA,YACA,WACA,yBAKZ,wBACI,cAGJ,mDACI,mBACA,YACA,WACA,uDACA,mBACA,kCAEA,qEACI,qBAIR,0DACI,aACA,mBACA,UACA,kCACA,iBAEA,qEACI,WACA,YACA,YACA,iBACA,uDACA,mBAEA,yEACI,WACA,YACA,yCAIR,kEACI,iBAIR,2DACI,oBACA,eAEA,gEACI,aACA,WACA,YAGJ,iEACI,gBAGJ,+DACI,WACA,YACA,iDACA,WAEA,qEACI,gDAMhB,eACI,aACA,WACA,YACA,mBACA,uBACA,eACA,kDACA,kBAEA,oBACI,kBACA,YACA,wBACA,eACA,iBACA,kBAGJ,kCACI,qBACA,YACA,iBACA,2BACA,gBAEA,uCACI,2B;ACvSA,qEACI,gBAKZ,wCACI,gBACA,YACA,wDACA,oCACA,gBACA,kDACA,gBAEA,8CACI,wDACA,YAGJ,0GAMI,YACA,iBACA,8BACA,gBAPA,sHACI,8BASA,0NACI,gBAKZ,+DACI,6BAEA,mEACI,UAKZ,gDACI,UACA,cAGJ,4CACI,gBACA,kDAGJ,sCACI,gBACA,kCAEA,qDACI,gBAIR,qBACI,eAGJ,qCACI,aACA,oCACA,4DACA,kCAGJ,0CACI,UAGJ,4CACI,aACA,YACA,mBACA,uBACA,aACA,0BAGJ,uCACI,aACA,YACA,mBACA,aACA,eACA,eAEA,mDACI,kDACA,kBAEA,wDACI,WAGJ,0DACI,gBAIR,mDACI,0BAGJ,kDACI,0BAGJ,mDACI,4CAGJ,yDACI,gBACA,eAGJ,yHAEI,aACA,WACA,YACA,mBACA,iBAEA,iIACI,WACA,YACA,iDAIR,qDACI,WAEA,6DACI,iBACA,YACA,WAGJ,4DACI,YACA,WAKZ,qBACI,cAGJ,4CACI,mBACA,YACA,WACA,uDACA,mBACA,kCAEA,8DACI,qBAIR,mDACI,aACA,mBACA,UACA,kCACA,iBAEA,iJAEI,aACA,WACA,YACA,YACA,iBACA,uDACA,mBAIA,4EACI,WACA,YACA,wCAKJ,6EACI,WACA,YACA,aACA,wCAIR,iEACI,aAIR,oDACI,oBACA,eAEA,yDACI,aACA,WACA,YAGJ,0DACI,gBAGJ,wDACI,WACA,YACA,iDACA,WAEA,8DACI,gD;AC/OZ,6BACI,WACA,YACA,aACA,6DACA,kBACA,oCACA,kBACA,gBAEA,mCACI,aACA,kCAIR,0BAEI,SACA,kDAGJ,8BACI,kBACA,WACA,gBAEA,mCACI,aACA,mBACA,8BAGJ,gCACI,uCACA,gBAGJ,kCAKI,kBACA,QACA,WACA,YACA,eACA,iDATA,wCACI,iDAYJ,8CACI,mB;AC4RhB,8BACI,QAEI,kCAGJ,QAEI,iCAGJ,YAGI,kCAGJ,QAEI,kCCrWR,sBACI,gBAEA,mCACI,iCACA,eACA,gBACA,iBAGJ,8BDwOA,YACA,gBACA,wBACA,eACA,gBACA,iBC1OI,yBACA,eD2OJ,6GAGI,+BAGJ,uCACI,kDACA,mBACA,qB;AAgFR,8BACI,QAEI,kCAGJ,QAEI,iCAGJ,YAGI,kCAGJ,QAEI,kCEnWR,kDACI,aAIA,0BACI,iBACA,mBACA,gBAEA,iCACI,cAIR,sBF8IA,kBACA,oBACA,mBACA,uBACA,wCACA,oCACA,kBACA,uBACA,gBACA,6BA4DA,YACA,eACA,eACA,iBElNI,aACA,mBFoJJ,4BACI,kDAGJ,6BACI,kDAGJ,4BACI,sBACA,mDACA,aAGJ,+BACI,mDACA,kDACA,mBAGJ,wBACI,aACA,eExKA,6BACI,gBAGJ,4BACI,aAGJ,qCACI,eAGJ,kCACI,8BAIR,oBACI,aACA,8BAGA,uDAEI,aAGJ,yBACI,gBAIR,uCACI,iDACA,mBAaI,iFACI,eAIR,2DACI,cACA,gBACA,gBAhBoB,CAiBpB,uB;ACjFR,yBACI,aACA,sBACA,mBACA,uBAEA,qCACI,kBACA,SACA,WACA,UACA,YACA,qBACA,wBACA,gBACA,gBACA,cACA,kDACA,eACA,aACA,eACA,gBAIR,0BACI,mBACA,eACA,gBACA,kBAGJ,gCACI,eACA,gB;AClCJ,+BAMI,QACA,SACA,aACA,sBACA,uBACA,YACA,2CAXA,qCADJ,+BAEQ,kBACA,aAYR,8DAEI,aAGJ,6BACI,iBACA,gBACA,eAGJ,0CACI,aACA,mBACA,8BACA,YACA,eACA,gBAEA,6CACI,SACA,eACA,gBAGJ,mGAEI,aAIJ,uDACI,0CACA,kCAGJ,sDACI,UACA,YACA,qBACA,wBACA,gBACA,gBACA,iDACA,eACA,aACA,gBAEA,qLAGI,iDAKZ,yBACI,gBAEA,8BACI,kBAIR,2CACI,6DACA,kDAEA,iDACI,yDACA,6DACA,kD","sources":["webpack://mattermost-webapp/./sass/components/_toggle.scss","webpack://mattermost-webapp/./components/invitation_modal/invite_as.scss","webpack://mattermost-webapp/./components/invitation_modal/result_table.scss","webpack://mattermost-webapp/./components/invitation_modal/result_view.scss","webpack://mattermost-webapp/./components/widgets/inputs/users_emails_input.scss","webpack://mattermost-webapp/./components/widgets/inputs/channels_input.scss","webpack://mattermost-webapp/./components/invitation_modal/add_to_channels.scss","webpack://mattermost-webapp/./sass/utils/_mixins.scss","webpack://mattermost-webapp/./components/invitation_modal/overage_users_banner_notice/overage_users_banner_notice.scss","webpack://mattermost-webapp/./components/invitation_modal/invite_view.scss","webpack://mattermost-webapp/./components/invitation_modal/no_permissions_view.scss","webpack://mattermost-webapp/./components/invitation_modal/invitation_modal.scss"],"sourcesContent":["// Based on https://codepen.io/aanjulena/pen/ZLZjzV\n// Colors\n$brand-primary: #2a9fd8;\n$gray: #6b7381;\n$gray-light: lighten($gray, 15%);\n$gray-lighter: lighten($gray, 30%);\n\n// Button Colors\n$btn-default-color: $gray;\n$btn-default-bg: $gray-lighter;\n\n// Toggle Sizes\n$toggle-default-size: 1.5rem;\n$toggle-default-margin: 4rem;\n$toggle-default-font-size: 0.75rem;\n\n// Mixin for Switch Colors\n// Variables: $color, $bg, $active-bg\n@mixin toggle-color($color: $btn-default-color, $bg: $btn-default-bg, $active-bg: $brand-primary) {\n    background: $bg;\n    color: $color;\n\n    &.active {\n        background-color: $active-bg;\n    }\n}\n\n// Mixin for Default Switch Styles\n// Variables: $size, $margin, $color, $bg, $active-bg, $font-size\n@mixin toggle-mixin($size: $toggle-default-size, $margin: $toggle-default-margin, $font-size: $toggle-default-font-size) {\n    $handlePosition: calc($size/7);\n    $handleSize: calc($size - (2 * $handlePosition));\n\n    position: relative;\n    min-width: calc($size * 2);\n    height: $size;\n    // color: $color;\n    // background: $bg;\n    padding: 0;\n    border: none;\n    border-radius: $size;\n    float: right;\n\n    &:focus,\n    &.focus {\n        &,\n        &.active {\n            outline: none;\n        }\n    }\n\n    > .handle {\n        position: absolute;\n        top: $handlePosition;\n        left: $handlePosition;\n        width: $handleSize;\n        height: $handleSize;\n        background: #fff;\n        border-radius: 1rem;\n        transition: left 0.25s;\n    }\n\n    &.active {\n        transition: background-color 0.25s;\n\n        > .handle {\n            right: $handlePosition;\n            left: inherit;\n            transition: left 0.25s;\n        }\n    }\n}\n\n// Apply Mixin to different sizes & colors\n.btn-toggle {\n    @include toggle-color;\n\n    &.disabled {\n        cursor: not-allowed;\n        opacity: 0.5;\n    }\n\n    &.btn-lg {\n        @include toggle-mixin($size: 2.8rem, $font-size: 1rem, $margin: 5rem);\n    }\n\n    &.btn-sm {\n        @include toggle-mixin($font-size: 0.55rem, $margin: 0.5rem);\n    }\n\n    &.btn-xs {\n        @include toggle-mixin($size:1rem,$margin:0);\n    }\n\n    .bg-text {\n        color: #fff;\n        font-size: 1.4rem;\n        font-weight: 600;\n\n        &.off {\n            padding: 0 1.6rem 0 3.4rem;\n        }\n\n        &.on {\n            padding: 0 3.4rem 0 1.6rem;\n        }\n    }\n}\n\n.btn-toggle-primary {\n    @include toggle-color(\n        $color: rgb(var(--button-color-rgb)),\n        $bg: rgba(var(--center-channel-color-rgb), 0.32),\n        $active-bg: rgb(var(--button-bg-rgb)),\n    );\n\n    &.disabled {\n        cursor: not-allowed;\n        opacity: 0.5;\n    }\n\n    &.btn-lg {\n        @include toggle-mixin($size: 2.8rem, $font-size: 1rem, $margin: 5rem);\n    }\n\n    &.btn-sm {\n        @include toggle-mixin($font-size: 0.55rem, $margin: 0.5rem);\n    }\n\n    &.btn-xs {\n        @include toggle-mixin($size:1rem,$margin:0);\n    }\n\n    .bg-text {\n        color: #fff;\n        font-size: 1.4rem;\n        font-weight: 600;\n\n        &.off {\n            padding: 0 1.6rem 0 3.4rem;\n        }\n\n        &.on {\n            padding: 0 3.4rem 0 1.6rem;\n        }\n    }\n}\n","@import 'components/toggle';\n\n.InviteAs {\n    &__label {\n        color: var(--center-channel-color);\n\n        &--parenthetical {\n            color: rgba(var(--center-channel-color-rgb), 0.8);\n        }\n    }\n\n    .radio {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n\n        &:first-child {\n            margin-top: 0;\n        }\n\n        &:last-child {\n            margin-bottom: 0;\n        }\n\n        .disabled-legend {\n            opacity: 0.6;\n        }\n\n        // TODO@UI\n        // in this case we should probably use a Chip component instead, which aligns better with what is needed here\n        // involved components are\n        //   - invite_as.tsx\n        //   - restricted_indicator.tsx\n        //   - radio_group.tsx\n        // @see https://mattermost.atlassian.net/browse/MM-46940\n        .Tag {\n            position: absolute;\n            display: inline-flex;\n            margin: 0;\n\n            &__restricted-indicator-badge {\n                position: relative;\n                display: flex;\n                height: 24px;\n                align-items: center;\n                padding: 0 12px;\n                border: 1px solid rgba(var(--denim-button-bg-rgb), 0.08);\n                background: rgba(var(--denim-button-bg-rgb), 0.04);\n                border-radius: 20px;\n                color: var(--denim-button-bg);\n\n                .RestrictedIndicator__icon-tooltip-container {\n                    padding: 0;\n\n                    .tag-text {\n                        padding-left: 5px;\n                        font-size: 11px;\n                        font-weight: 700;\n                    }\n\n                    .RestrictedIndicator__icon-tooltip {\n                        padding: 0;\n                        font-size: 14px;\n                    }\n\n                    .RestrictedIndicator__button {\n                        display: flex;\n                        margin-top: 4px;\n\n                        .tag-text {\n                            padding-left: 0;\n                        }\n                    }\n                }\n            }\n        }\n    }\n}\n","@import 'utils/variables';\n\n.InviteResultTable {\n    width: 100%;\n    max-height: 400px;\n    overflow-y: auto;\n\n    .table-header {\n        display: flex;\n        height: 40px;\n        border-top: 1px solid rgba(var(--center-channel-color-rgb), 0.08);\n        border-bottom: 1px solid rgba(var(--center-channel-color-rgb), 0.08);\n        color: var(--center-channel-color);\n        font-size: 14px;\n\n        .people-header,\n        .details-header {\n            display: flex;\n            width: 50%;\n            align-items: center;\n            margin: 12px;\n            font-weight: bold;\n        }\n\n        span {\n            display: flex;\n        }\n    }\n}\n\n.InviteResultRow {\n    display: flex;\n\n    .username-or-icon {\n        display: flex;\n        width: 50%;\n        align-items: center;\n\n        .email {\n            margin: 0 4px 0 8px;\n            overflow-wrap: anywhere;\n            word-break: break-word;\n        }\n\n        .name {\n            margin: 0 4px 0 8px;\n        }\n\n        .mail-icon {\n            display: inline-block;\n            width: 36px;\n            height: 36px;\n            padding: 3px;\n            margin: 12px 0 12px 12px;\n            background: var(--button-bg);\n            border-radius: 18px;\n\n            svg {\n                width: 24px;\n                height: 24px;\n                margin: 3px;\n                fill: var(--button-color);\n            }\n        }\n\n        .alert-icon {\n            display: inline-block;\n            width: 36px;\n            height: 36px;\n            padding: 3px;\n            margin: 12px 0 12px 12px;\n            background: var(--dnd-indicator);\n            border-radius: 18px;\n\n            svg {\n                width: 28.8px;\n                height: 28.8px;\n                margin: 0.6px;\n                fill: var(--button-color);\n            }\n        }\n\n        .Avatar {\n            margin: 12px 0 12px 12px;\n        }\n\n        .Tag {\n            margin-left: 4px;\n        }\n    }\n\n    .reason {\n        width: 50%;\n        align-items: center;\n        padding: 12px;\n    }\n}\n\n.invitation-modal-confirm {\n    h2 {\n        margin-bottom: 13px;\n        color: rgba(var(--center-channel-color-rgb), 0.72);\n        font-size: 14px;\n        font-weight: 600;\n    }\n\n    &--not-sent {\n        .InviteResultTable {\n            .table-header {\n                background: rgba(238, 179, 0, 0.2);\n            }\n        }\n    }\n\n    &--sent {\n        .InviteResultTable {\n            .table-header {\n                background: rgba(0, 131, 89, 0.2);\n\n                svg {\n                    width: 18px;\n                    height: 18px;\n                    fill: var(--center-channel-color);\n                }\n            }\n        }\n    }\n}\n",".ResultView {\n    &__inviteMore {\n        border: 1px solid var(--button-bg);\n        background: transparent;\n    }\n}\n","@import 'utils/variables';\n\n.UsersEmailsInput {\n\n    // Error state overrides to default styles\n    &.error {\n        .users-emails-input__control {\n            border-color: var(--error-text);\n\n            &--is-focused,\n            &--menu-is-open {\n                &:hover {\n                    border-color: var(--error-text);\n                }\n\n                border-color: var(--error-text);\n            }\n\n            .users-emails-input__input {\n                border-bottom: 1px dotted var(--error-text);\n\n                .a11y--focused {\n                    box-shadow: none;\n                }\n            }\n        }\n    }\n\n    &.empty {\n        .users-emails-input__control {\n            .users-emails-input__input {\n                border-bottom: 0;\n\n                .a11y--focused {\n                    box-shadow: none;\n                }\n            }\n        }\n    }\n\n    .users-emails-input__control {\n        min-height: 48px;\n        padding: 3px;\n        border-color: rgba(var(--center-channel-color-rgb), 0.2);\n        background: var(--center-channel-bg);\n        box-shadow: none;\n        color: rgba(var(--center-channel-color-rgb), 0.64);\n        transition: none;\n\n        &--is-focused,\n        &--menu-is-open {\n            &:hover {\n                border-color: var(--button-bg);\n            }\n\n            padding: 2px;\n            border-width: 2px;\n            border-color: var(--button-bg);\n            transition: none;\n\n            .users-emails-input__value-container {\n                .users-emails-input__input {\n                    border-bottom: 0;\n\n                    .a11y--focused {\n                        box-shadow: none;\n                    }\n                }\n            }\n        }\n\n        .users-emails-input__input {\n            border-bottom: 1px dotted red;\n\n            >div {\n                width: 1px;\n            }\n        }\n    }\n\n    .users-emails-input__value-container {\n        padding: 0;\n        margin-left: 0;\n    }\n\n    .users-emails-input__placeholder {\n        margin-left: 8px;\n        color: rgba(var(--center-channel-color-rgb), 0.64);\n    }\n\n    .users-emails-input__input {\n        margin-left: 6px;\n        color: var(--center-channel-color);\n\n        .a11y--focused {\n            box-shadow: none;\n        }\n    }\n\n    input {\n        height: inherit;\n    }\n\n    .users-emails-input__menu {\n        margin-top: 0;\n        background: var(--center-channel-bg);\n        box-shadow: 0 0 0 0 hsla(0, 0%, 0%, 0.1), 0 4px 11px hsla(0, 0%, 0%, 0.1);\n        color: var(--center-channel-color);\n    }\n\n    .users-emails-input__menu-list {\n        padding: 0;\n    }\n\n    .users-emails-input__menu-notice {\n        display: flex;\n        height: 60px;\n        align-items: center;\n        justify-content: center;\n        padding: 12px;\n        border-radius: 4px 4px 0 0;\n    }\n\n    .users-emails-input__option {\n        display: flex;\n        height: 60px;\n        align-items: center;\n        padding: 12px;\n        cursor: pointer;\n        gap: 8px;\n\n        &--no-matches {\n            color: rgba(var(--center-channel-color-rgb), 0.56);\n            text-align: center;\n\n            span {\n                width: 100%;\n            }\n\n            strong {\n                font-weight: 600;\n            }\n        }\n\n        &:first-child {\n            border-radius: 4px 4px 0 0;\n        }\n\n        &:last-child {\n            border-radius: 0 0 4px 4px;\n        }\n\n        &--is-focused {\n            background: rgba(var(--button-bg-rgb), 0.08);\n        }\n\n        &--no-matches:hover {\n            background: none;\n            cursor: default;\n        }\n\n        .fullname {\n            opacity: 0.5;\n\n            &::before {\n                padding: 5px;\n                content: \"-\";\n            }\n        }\n\n        .nickname {\n            opacity: 0.5;\n\n            &::before {\n                content: \"(\";\n                opacity: 0.5;\n            }\n\n            &::after {\n                content: \")\";\n                opacity: 0.5;\n            }\n        }\n\n        .mail-plus-icon {\n            display: inline-block;\n            width: 36px;\n            height: 36px;\n            padding: 3px;\n            margin-right: 8px;\n            background: var(--button-bg);\n            border-radius: 18px;\n\n            svg {\n                width: 24px;\n                height: 24px;\n                margin: 3px;\n                fill: var(--button-color);\n            }\n        }\n    }\n\n    .show {\n        display: block;\n    }\n\n    .users-emails-input__multi-value {\n        align-items: center;\n        padding: 4px;\n        margin: 4px;\n        background: rgba(var(--center-channel-color-rgb), 0.08);\n        border-radius: 16px;\n        color: var(--center-channel-color);\n\n        &:nth-last-child(2) {\n            margin: 4px 0 4px 4px;\n        }\n    }\n\n    .users-emails-input__multi-value__label {\n        display: flex;\n        align-items: center;\n        padding: 0;\n        color: var(--center-channel-color);\n        font-size: 1.6rem;\n\n        .mail-icon {\n            width: 24px;\n            height: 24px;\n            padding: 3px;\n            margin-right: 4px;\n            background: rgba(var(--center-channel-color-rgb), 0.56);\n            border-radius: 16px;\n\n            svg {\n                width: 18px;\n                height: 18px;\n                fill: rgba(var(--button-color-rgb), 0.88);\n            }\n        }\n\n        .Avatar {\n            margin-right: 4px;\n        }\n    }\n\n    .users-emails-input__multi-value__remove {\n        padding: 0 4px 0 8px;\n        cursor: pointer;\n\n        span {\n            display: flex;\n            width: 16px;\n            height: 16px;\n        }\n\n        &:hover {\n            background: none;\n        }\n\n        svg {\n            width: 16px;\n            height: 16px;\n            fill: rgba(var(--center-channel-color-rgb), 0.64);\n            opacity: 0.6;\n\n            &:hover {\n                fill: rgba(var(--center-channel-color-rgb), 0.8);\n            }\n        }\n    }\n}\n\n.InputErrorBox {\n    display: flex;\n    width: 100%;\n    height: 60px;\n    align-items: center;\n    justify-content: center;\n    margin-top: 2px;\n    background: rgba(var(--error-box-background), 0.1);\n    border-radius: 4px;\n\n    span {\n        position: relative;\n        height: 20px;\n        color: var(--error-text);\n        font-size: 16px;\n        line-height: 20px;\n        text-align: center;\n    }\n\n    button.upgradeLink {\n        padding: 0 !important;\n        border: none;\n        margin-left: 10px;\n        background: none !important;\n        font-weight: 600;\n\n        span {\n            color: var(--sys-button-bg);\n        }\n    }\n}\n","@import 'utils/variables';\n\n.ChannelsInput {\n    &.empty {\n        .channels-input__control {\n            .channels-input__input {\n                border-bottom: 0;\n            }\n        }\n    }\n\n    .channels-input__control {\n        min-height: 48px;\n        padding: 3px;\n        border-color: rgba(var(--center-channel-color-rgb), 0.2);\n        background: var(--center-channel-bg);\n        box-shadow: none;\n        color: rgba(var(--center-channel-color-rgb), 0.64);\n        transition: none;\n\n        &:hover {\n            border-color: rgba(var(--center-channel-color-rgb), 0.2);\n            cursor: text;\n        }\n\n        &--is-focused,\n        &--menu-is-open {\n            &:hover {\n                border-color: var(--button-bg);\n            }\n\n            padding: 2px;\n            border-width: 2px;\n            border-color: var(--button-bg);\n            transition: none;\n\n            .channels-input__value-container {\n                .channels-input__input {\n                    border-bottom: 0;\n                }\n            }\n        }\n\n        .channels-input__input {\n            border-bottom: 1px dotted red;\n\n            >div {\n                width: 1px;\n            }\n        }\n    }\n\n    .channels-input__value-container {\n        padding: 0;\n        margin-left: 0;\n    }\n\n    .channels-input__placeholder {\n        margin-left: 8px;\n        color: rgba(var(--center-channel-color-rgb), 0.64);\n    }\n\n    .channels-input__input {\n        margin-left: 6px;\n        color: var(--center-channel-color);\n\n        .a11y--focused {\n            box-shadow: none;\n        }\n    }\n\n    input {\n        height: inherit;\n    }\n\n    .channels-input__menu {\n        margin-top: 0;\n        background: var(--center-channel-bg);\n        box-shadow: 0 0 0 0 hsla(0, 0%, 0%, 0.1), 0 4px 11px hsla(0, 0%, 0%, 0.1);\n        color: var(--center-channel-color);\n    }\n\n    .channels-input__menu-list {\n        padding: 0;\n    }\n\n    .channels-input__menu-notice {\n        display: flex;\n        height: 44px;\n        align-items: center;\n        justify-content: center;\n        padding: 12px;\n        border-radius: 4px 4px 0 0;\n    }\n\n    .channels-input__option {\n        display: flex;\n        height: 44px;\n        align-items: center;\n        padding: 12px;\n        cursor: pointer;\n        font-size: 16px;\n\n        &--no-matches {\n            color: rgba(var(--center-channel-color-rgb), 0.56);\n            text-align: center;\n\n            span {\n                width: 100%;\n            }\n\n            strong {\n                font-weight: 600;\n            }\n        }\n\n        &:first-child {\n            border-radius: 4px 4px 0 0;\n        }\n\n        &:last-child {\n            border-radius: 0 0 4px 4px;\n        }\n\n        &--is-focused {\n            background: rgba(var(--button-bg-rgb), 0.08);\n        }\n\n        &--no-matches:hover {\n            background: none;\n            cursor: default;\n        }\n\n        .public-channel-icon,\n        .private-channel-icon {\n            display: flex;\n            width: 18px;\n            height: 18px;\n            align-items: center;\n            margin-right: 8px;\n\n            svg {\n                width: 18px;\n                height: 18px;\n                fill: rgba(var(--center-channel-color-rgb), 0.56);\n            }\n        }\n\n        .channel-name {\n            opacity: 0.5;\n\n            &::before {\n                padding-left: 5px;\n                content: \"(\";\n                opacity: 0.5;\n            }\n\n            &::after {\n                content: \")\";\n                opacity: 0.5;\n            }\n        }\n    }\n\n    .show {\n        display: block;\n    }\n\n    .channels-input__multi-value {\n        align-items: center;\n        padding: 4px;\n        margin: 4px;\n        background: rgba(var(--center-channel-color-rgb), 0.08);\n        border-radius: 16px;\n        color: var(--center-channel-color);\n\n        &:nth-last-child(2) {\n            margin: 4px 0 4px 4px;\n        }\n    }\n\n    .channels-input__multi-value__label {\n        display: flex;\n        align-items: center;\n        padding: 0;\n        color: var(--center-channel-color);\n        font-size: 1.6rem;\n\n        .public-channel-icon,\n        .private-channel-icon {\n            display: flex;\n            width: 24px;\n            height: 24px;\n            padding: 4px;\n            margin-right: 4px;\n            background: rgba(var(--center-channel-color-rgb), 0.56);\n            border-radius: 16px;\n        }\n\n        .public-channel-icon {\n            svg {\n                width: 16px;\n                height: 16px;\n                fill: rgba(var(--button-color-rgb), 0.8);\n            }\n        }\n\n        .private-channel-icon {\n            svg {\n                width: 14px;\n                height: 14px;\n                margin: 0 1px;\n                fill: rgba(var(--button-color-rgb), 0.8);\n            }\n        }\n\n        .channel-name {\n            display: none;\n        }\n    }\n\n    .channels-input__multi-value__remove {\n        padding: 0 4px 0 8px;\n        cursor: pointer;\n\n        span {\n            display: flex;\n            width: 16px;\n            height: 16px;\n        }\n\n        &:hover {\n            background: none;\n        }\n\n        svg {\n            width: 16px;\n            height: 16px;\n            fill: rgba(var(--center-channel-color-rgb), 0.64);\n            opacity: 0.6;\n\n            &:hover {\n                fill: rgba(var(--center-channel-color-rgb), 0.8);\n            }\n        }\n    }\n}\n","@import 'utils/variables';\n\n.AddToChannels {\n    &__messageInput {\n        width: 100%;\n        height: 90px;\n        padding: 12px;\n        border: 1px solid rgba(var(--center-channel-color-rgb), 0.64);\n        margin-bottom: 8px;\n        background: var(--center-channel-bg);\n        border-radius: 4px;\n        resize: vertical;\n\n        &:focus {\n            padding: 11px;\n            border: 2px solid var(--button-bg);\n        }\n    }\n\n    .help-text {\n        // override default from _inputs.scss\n        margin: 0;\n        color: rgba(var(--center-channel-color-rgb), 0.64);\n    }\n\n    &__customMessage {\n        position: relative;\n        width: 100%;\n        max-width: 720px;\n\n        &Title {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n        }\n\n        a {\n            color: rgba(var(--button-bg-rgb), 0.88);\n            font-weight: 600;\n        }\n\n        svg {\n            &:hover {\n                fill: rgba(var(--center-channel-color-rgb), 0.56);\n            }\n\n            position: relative;\n            top: 3px;\n            width: 24px;\n            height: 24px;\n            cursor: pointer;\n            fill: rgba(var(--center-channel-color-rgb), 0.64);\n        }\n\n        .help-text {\n            span {\n                font-weight: normal;\n            }\n        }\n    }\n}\n","@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 'utils/mixins';\n\n.overage_users_banner {\n    margin-top: 16px;\n\n    &__description {\n        color: var(--center-channel-text);\n        font-size: 14px;\n        font-weight: 400;\n        line-height: 20px;\n    }\n\n    &__button {\n        @include link;\n\n        background: transparent;\n        font-size: 14px;\n    }\n}\n","@import 'sass/utils/_mixins';\n// MM-40611 workaround to not show outline on Microsoft browsers\n// had to be this specific, i.e. `button.InviteView__copyLink:focus`\n// does not work\nbutton.InviteView__copyLink.tertiary-button:focus {\n    outline: none;\n}\n\n.InviteView {\n    &__sectionTitle {\n        padding-top: 16px;\n        padding-bottom: 8px;\n        font-weight: 600;\n\n        &--first {\n            padding-top: 0;\n        }\n    }\n\n    &__copyLink {\n        @include secondary-button;\n        @include button-medium;\n\n        display: flex;\n        align-items: center;\n\n        &:active {\n            box-shadow: none;\n        }\n\n        &:focus {\n            outline: none;\n        }\n\n        &.btn.btn-cancel {\n            padding-left: 0;\n        }\n\n        .icon-check {\n            color: var(--online-indicator);\n        }\n    }\n\n    &__footer {\n        display: flex;\n        justify-content: space-between;\n\n        // to override clearfix rule in clearfix.less\n        &::before,\n        &::after {\n            display: none;\n        }\n\n        .btn {\n            font-weight: 600;\n        }\n    }\n\n    &__sectionTitleParenthetical {\n        color: rgba(var(--center-channel-color-rgb), 0.6);\n        font-weight: normal;\n    }\n}\n\n// UX decision to show no more than about 5 1/4 lines of users/emails at a time.\n$less-than-6-user-lines-height: 227px;\n\n.modal-body {\n    .UsersEmailsInput {\n        &.no-selections {\n            // placeholder and input position is difficult to change.\n            // This overrides the default positioning of the input & placeholders\n            // to make the taller than normal input look ok when nothing has yet been selected\n            .users-emails-input__value-container {\n                margin-top: 6px;\n            }\n        }\n\n        .users-emails-input__control {\n            overflow: auto;\n            min-height: 84px;\n            max-height: $less-than-6-user-lines-height;\n            align-items: flex-start;\n        }\n    }\n}\n",".NoPermissionsView {\n    &__body {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n\n        .icon-close {\n            position: absolute;\n            top: 20px;\n            right: 15px;\n            padding: 0;\n            border: none;\n            -moz-appearance: none;\n            -webkit-appearance: none;\n            appearance: none;\n            background: none;\n            color: inherit;\n            color: rgba(var(--center-channel-color-rgb), 0.56);\n            cursor: pointer;\n            font: inherit;\n            font-size: 24px;\n            outline: inherit;\n        }\n    }\n\n    &__title {\n        margin: 10px 0 22px;\n        font-size: 22px;\n        font-weight: 600;\n        text-align: center;\n    }\n\n    &__description {\n        font-size: 14px;\n        text-align: left;\n    }\n}\n",".InvitationModal {\n    .modal-dialog {\n        @media screen and (min-width: 640px) {\n            position: absolute;\n            width: 600px;\n        }\n\n        top: 50%;\n        left: 50%;\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        margin: auto;\n        transform: translate(-50%, -50%) !important;\n    }\n\n    .modal-header,\n    .modal-footer {\n        padding: 24px;\n    }\n\n    .modal-body {\n        overflow: visible;\n        max-height: none;\n        padding: 0 24px;\n    }\n\n    .InvitationModal__header {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        border: none;\n        font-size: 22px;\n        font-weight: 600;\n\n        h1 {\n            margin: 0;\n            font-size: 22px;\n            font-weight: 600;\n        }\n\n        &::before,\n        &::after {\n            display: none;\n        }\n\n        // beat regular modal-header in specificity\n        &.modal-header {\n            background-color: var(--center-channel-bg);\n            color: var(--center-channel-color);\n        }\n\n        .icon-close {\n            padding: 0;\n            border: none;\n            -moz-appearance: none;\n            -webkit-appearance: none;\n            appearance: none;\n            background: none;\n            color: rgb(var(--center-channel-color-rgb), 0.56);\n            cursor: pointer;\n            font: inherit;\n            outline: inherit;\n\n            &:hover,\n            &:active,\n            &:focus {\n                color: rgb(var(--center-channel-color-rgb), 0.56);\n            }\n        }\n    }\n\n    &__footer {\n        border-top: none;\n\n        .btn {\n            border-radius: 4px;\n        }\n    }\n\n    .btn.btn-primary:disabled {\n        background-color: rgba(var(--center-channel-color-rgb), 0.08);\n        color: rgba(var(--center-channel-color-rgb), 0.32);\n\n        &:hover {\n            border-color: rgba(var(--center-channel-color-rgb), 0.08);\n            background-color: rgba(var(--center-channel-color-rgb), 0.08);\n            color: rgba(var(--center-channel-color-rgb), 0.32);\n        }\n    }\n}\n"],"names":[],"sourceRoot":""}