{"version":3,"file":"7376.1db04f7515088f06f06b.css","mappings":"AAoXA,wCACI,IACI,sBAGJ,KACI,qBAgBR,8BACI,QAEI,kCAGJ,QAEI,iCAGJ,YAGI,kCAGJ,QAEI,kCCrZR,SAMI,kBACA,aACA,aACA,iBAPA,yBAFJ,SAGQ,cAQJ,cACI,kBACA,aACA,UAhBQ,CAiBR,OACA,iBACA,iBACA,wBACA,kBACA,kBACA,qBACA,kBAEA,6BACI,kBAGA,WACA,WACA,iBACA,mBACA,eAGI,6CACI,kBACA,MACA,OACA,UACA,WA3CA,CA4CA,oDACA,mDACA,WAGJ,wHAGI,uDAEA,oIACI,kFAKZ,wGAEI,cACA,gBACA,UAhEI,CAiEJ,WAjEI,CAkEJ,iCACA,cACA,cAEA,oHACI,yDAGJ,gHACI,UA3EA,CA4EA,WA5EA,CA6EA,iCAIR,sDACI,YACA,sBACA,sBACA,eACA,iBACA,sBAEA,wIAEI,eAEA,wJACI,kBAKZ,gDACI,0CAEA,8GAEI,yCAIR,4DACI,aACA,mBAIR,gCACI,WACA,yDACA,aACA,mBAGJ,0DACI,4CACA,uBACA,sBAIR,iBACI,kBACA,aACA,iBACA,mBACA,iBACA,oBAEA,8CD6HJ,aACA,mBACA,uBACA,SACA,kBACA,gBACA,kDA8BA,WACA,YACA,YACA,eChKQ,0CDiIR,+GAEI,sBACA,wDACA,gBACA,aAGJ,oDACI,SACA,uDACA,iDAGJ,qDACI,SACA,4CACA,uBAGJ,uDACI,gBACA,kDACA,mBCtJI,oDACI,qDACA,0CAOhB,iCACI,a","sources":["webpack://mattermost-webapp/./src/sass/utils/_mixins.scss","webpack://mattermost-webapp/./src/components/app_bar/app_bar.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}\n\n@mixin pie-clearfix {\n    &::after {\n        display: table;\n        clear: both;\n        content: \"\";\n    }\n}\n\n@mixin tertiary-button {\n    display: inline-flex;\n    align-items: center;\n    border: 0;\n    border-radius: 4px;\n    background: rgba(var(--button-bg-rgb), 0.08);\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        &:first-child::before {\n            margin: 0 7px 0 0;\n        }\n\n        &:last-child::before {\n            margin: 0 0 0 7px;\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    border-radius: 4px;\n    background: var(--button-bg);\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:not(.always-show-enabled) {\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    border-radius: 4px;\n    background: var(--center-channel-bg);\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 icon-button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: 0;\n    border-radius: 4px;\n    background: none;\n    color: rgba(var(--center-channel-color-rgb), 0.64);\n\n    &:focus,\n    &:focus-within {\n        box-sizing: border-box;\n        border: 2px solid rgba(var(--denim-button-bg-rgb), 0.32);\n        box-shadow: none;\n        outline: none;\n    }\n\n    &:hover {\n        border: 0;\n        background: rgba(var(--center-channel-color-rgb), 0.08);\n        color: rgba(var(--center-channel-color-rgb), 0.8);\n    }\n\n    &:active {\n        border: 0;\n        background: rgba(var(--button-bg-rgb), 0.08);\n        color: var(--button-bg);\n    }\n\n    &:disabled {\n        background: none;\n        color: rgba(var(--center-channel-color-rgb), 0.32);\n        cursor: not-allowed;\n    }\n}\n\n@mixin icon-button-small-compact {\n    width: 28px;\n    height: 28px;\n    padding: 6px;\n    font-size: 16px;\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@keyframes emphasis-sidebar-resize-line {\n    50% {\n        transform: scaleX(1.5);\n    }\n\n    100% {\n        transform: scaleX(1);\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\n@mixin textEllipsis {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n","// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.\n// See LICENSE.txt for license information.\n\n@import 'utils/mixins';\n\n$app-bar-icon-size: 24px;\n$app-bar-width: 44px;\n\n.app-bar {\n    // Do not show App Bar if on mobile\n    @media (max-width: 768px) {\n        display: none;\n    }\n\n    position: relative;\n    display: flex;\n    min-height: 0;\n    flex-flow: column;\n\n    &__top {\n        position: relative;\n        display: flex;\n        width: $app-bar-width;\n        flex: 1;\n        flex-flow: column;\n        padding-top: 15px;\n        -ms-overflow-style: none;\n        overflow-x: hidden;\n        overflow-y: scroll;\n        scrollbar-width: none;\n        text-align: center;\n\n        .app-bar__icon {\n            position: relative;\n            // Render App Bar icons on top of the RHS background div\n            //(see `@media screen and (min-width: 769px) > #sidebar-right` in sass/layout/_sidebar-right.scss)\n            z-index: 21;\n            width: 100%;\n            border-left: none;\n            margin-bottom: 16px;\n            cursor: pointer;\n\n            &--active {\n                &::before {\n                    position: absolute;\n                    top: 0;\n                    left: 0;\n                    width: 3px;\n                    height: $app-bar-icon-size;\n                    border-radius: 0 var(--radius-xs) var(--radius-xs) 0;\n                    background-color: var(--sidebar-text-active-border);\n                    content: '';\n                }\n\n                .app-bar__icon-inner,\n                span:not(.pulsating_dot) {\n                    // if we want to show a tourtip/pulsating dot in any of the app bar icons, these styles must be ommitted when span.pulsating_dot\n                    box-shadow: 0 0 0 2px var(--sidebar-text-active-border);\n\n                    &:hover {\n                        box-shadow: 0 0 0 2px rgba(var(--sidebar-text-active-border-rgb), 0.92) !important;\n                    }\n                }\n            }\n\n            .app-bar__icon-inner,\n            span:not(.pulsating_dot) {\n                display: block;\n                overflow: hidden;\n                width: $app-bar-icon-size;\n                height: $app-bar-icon-size;\n                border-radius: var(--radius-full);\n                margin: 0 auto;\n                line-height: 1;\n\n                &:hover {\n                    box-shadow: 0 0 0 2px rgba(var(--sidebar-text-rgb), 0.16);\n                }\n\n                img {\n                    width: $app-bar-icon-size;\n                    height: $app-bar-icon-size;\n                    border-radius: var(--radius-full);\n                }\n            }\n\n            span:not(.pulsating_dot) {\n                padding: 2px;\n                background-color: white;\n                fill: var(--button-bg);\n                font-size: 14px;\n                line-height: 20px;\n                vertical-align: middle;\n\n                &.CompassIcon,\n                &.icon-brand-zoom {\n                    font-size: 20px;\n\n                    &::before {\n                        margin: 0 0 0 0.5px;\n                    }\n                }\n            }\n\n            .app-bar__old-icon {\n                color: rgba(var(--sidebar-text-rgb), 0.64);\n\n                &:hover,\n                &--active {\n                    color: rgba(var(--sidebar-text-rgb), 0.8);\n                }\n            }\n\n            .app-bar__icon-inner--centered {\n                display: grid;\n                place-items: center;\n            }\n        }\n\n        .app-bar__divider {\n            width: 28px;\n            border-top: 1px solid rgba(var(--sidebar-text-rgb), 0.16);\n            margin-top: 0;\n            margin-bottom: 19px;\n        }\n\n        .app-bar__icon.channel-header__icon--active {\n            background: rgba(var(--button-bg-rgb), 0.08);\n            color: var(--button-bg);\n            fill: var(--button-bg);\n        }\n    }\n\n    &__bottom {\n        position: relative;\n        display: flex;\n        flex-flow: column;\n        align-items: center;\n        padding-top: 24px;\n        padding-bottom: 36px;\n\n        .app_bar__marketplace_button {\n            @include icon-button;\n            @include icon-button-small-compact;\n\n            color: rgba(var(--sidebar-text-rgb), 0.64);\n\n            &:hover {\n                background-color: rgba(var(--sidebar-text-rgb), 0.08);\n                color: rgba(var(--sidebar-text-rgb), 0.72);\n            }\n        }\n    }\n}\n\n// This style is defined outside the .app-bar block above because it doesn't seem to work when defined there\n.app-bar__top::-webkit-scrollbar {\n    display: none;\n}\n"],"names":[],"sourceRoot":""}