.aside {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 200px;
    padding: 40px 15px 30px;
    background: var(--aside-bg);
    overflow: hidden;
    user-select: none;
    -webkit-app-region: drag;
    color: var(--aside-color);
    font-size: 13.7px;
    letter-spacing: 0.3px;

    &__header {
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-bottom: 15px;

        &-left {
            display: flex;
            flex-direction: column;
            font-size: 18px;
            font-weight: 600;
            color: #fff;
        }

        &-avatar {
            width: 37px;
            height: 37px;
            color: #3D3F4D;
            cursor: pointer;
            transition: all 50ms ease;
            transition-delay: 100ms;
            will-change: color;

            &-inner {
                color: #A2A8BD;
                transition: color 50ms ease;
                transition-delay: 100ms;
                will-change: color;
            }

            &:hover {
                color: #3C93F7;
            }

            &:hover &-inner {
                color: #FFF;
            }

        }

    }

    /**
     * Authorization panel
     * =========================
     */
    &__authorization {
        position: absolute;
        top: calc(100% + 12px);
        right: 0;
        left: 0;
        padding: 20px 25px;
        font-size: 13.1px;
        color: #000;
        text-align: center;
        border-radius: 3px;
        background-color: #F5F9FE;
        will-change: opacity, transform;
        opacity: 0;
        visibility: hidden;
        transform: translateY(7px);
        transition: all 70ms ease;
        transition-delay: 150ms;
        cursor: default;
        z-index: 2;

        &::before {
            content:'';
            position: absolute;
            top: -7px;
            left: 173.5px;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 8px 8px 8px;
            border-color: transparent transparent #F5F9FE transparent;
        }

        &-title {
            line-height: 1.4em;
            letter-spacing: 0.0284em;
        }
    }

    &__header-avatar {

         &--filled {
             cursor: default;
         }

         &:not(&--filled):hover ^&__authorization {
              transform: none;
              opacity: 1;
              visibility: visible;
         }

         ^&__user-photo {
            display: none;
            width: 37px;
            height: 37px;
            border-radius: 50%;
            background-size: cover;
         }

         &--filled ^&__user-photo {
            display: inline-block;
         }

         &--filled svg {
            display: none;
         }
    }

    /**
     * Section title such as Folders or Notes
     * ============================
     */
    &__section-title {
        margin-bottom: 10px;
        color: var(--label-color);
        font-size: 11.7px;
        letter-spacing: 0.72px;
        text-transform: uppercase;

        &:not(:first-of-type){
            margin-top: 30px;
        }
    }

    &__section-settings {
        margin: 24px 0;
    }

    .add-note-button {
        display: block;
        padding: 10px 13px;
        border: 1.3px dashed rgba(130, 156, 176, 0.42);
        border-radius: 3px;
        color: #63758c;
        line-height: 1em;
        margin-bottom: 15px;
        font-size: 15px;
        cursor: pointer;

        svg {
            margin-top: -1px;
            float: right;
        }

        &:hover {
            border-color: rgba(77,120,190,0.72);
            color: #5ba2ff;
        }
    }

    /**
     * Add folder button and input
     * ============================
     */
    &__input,
    &__add-button {
        padding: 8px 0;
        margin: 10px 0 0;
        color: var(--label-color);
    }

    /**
     * Aside input field
     * Such as New Folder or Invite collaborator
     */
    &__input {
        border: 0;
        border-bottom: 2px #4c525a solid;

        input {
            border: none;
            background: transparent;
            outline: none;
            color: #fff;
            padding-right: 5px;
            width: 90%;
            letter-spacing: inherit;

            &::placeholder {
                color: var(--label-color);
            }

            &:focus + svg {
                color: #fff;
            }
        }

        svg {
            float: right;
            display: inline-block;
            height: 0.8em;
            margin-top: 0.3em;
        }
    }

    /**
     * Add something button
     */
    &__add-button {
        cursor: pointer;

        svg {
            width: 0.9em;
            height: 0.9em;
            margin-right: 0.5em;
            margin-top: -3px;
            vertical-align: middle;
        }

        &:hover {
            color: #fff;
        }
    }
}

.update-notification {
    position: absolute;
    bottom: 0;
    width: 100%;
    margin-left: -15px;
    background: #23242e;
    padding: 14px 0;
    cursor: pointer;
    display: none;

    &__text-main {
        color: #14C063;
        font-weight: bold;
        font-size: 13.1px;
        letter-spacing: -0.03px;
        text-align: center
    }

    &__text-description {
        text-align: center;
    }

    &--showed {
        display: block;
    }

    &:hover {
        background: #1d1e27;
    }
}

/**
 * Swiper with 2 sections
 */
.aside-swiper {
    display: flex;
    width: calc(200% + 15px);
    height: 100%;
    transition: transform 150ms ease-in;
    will-change: transform;

    &__left,
    &__right {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 200px;
        position: relative;
    }

    &__left {
        transition: opacity 200ms ease;
        will-change: opacity;
    }

    &__right {
        margin-left: 15px;
    }

    &--toggled {
        transform: translateX(-215px);

        ^&__left {
            opacity: 0.2;
        }
    }
}

.authorization-button {
    display: inline-block;
    margin-top: 15px;
    cursor: pointer;
    color: #496A84;

    svg {
        margin-right: 8px;
    }

    &:hover {
        color: #1A2630;
        cursor: pointer;
    }
}

/**
 * Scrollable zone
 */
.aside__scrollable {
    position: relative;
    flex: 2 100%;
    overflow-y: hidden;
    overflow-x: hidden;

    &::before,
    &::after {
        content: '';
        height: 15px;
        left: 0;
        right: 0;
        position: absolute;
        z-index: 2;
    }

    &::before {
        top: 0;
        background: linear-gradient(to bottom, rgba(41,43,55,1) 0%,rgba(41,43,55,0) 90%);
        opacity: 0;
    }

    &--scrolled::before {
        opacity: 1;
    }

    &::after {
        bottom: 0;
        background: linear-gradient(to bottom, rgba(41,43,55,0) 0%,rgba(41,43,55,1) 90%);
    }

    &-content {
        height: 100%;
        overflow-y: auto;
        margin-right: -12px;
        padding-right: 12px;

        &::after{
            display: block;
            content: '';
            height: 15px;
        }
    }
}

/**
 * Collaborators
 */
.member-list {
    &__item {
        font-size: 13.8px;
        list-style: none;
        margin-bottom: 10px;
        display: flex;

        &--waiting {
            opacity: 0.6;
        }

        &-name {
            position: absolute;
            transition: transform 300ms ease;
            will-change: transform;

            &-wrapper {
                position: relative;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                height: 1.1em;
                width: 100%;

                &--scrollable::after {
                    content: '';
                    right: 0;
                    top: 0;
                    bottom: 0;
                    width: 20px;
                    background: linear-gradient(to right, rgba(41, 43, 55, 0) 0, #292b37 90%);
                    position: absolute;
                }
            }
        }

        &:hover &-name-wrapper--scrollable &-name {
            transform: translateX(calc(175px - 100%));
        }

        &:hover &-name-wrapper--scrollable {
            &::after {
                visibility: hidden;
            }
        }

        &-photo {
             margin: auto 9px auto 0;
             width: 12px;
             height: 12px;
             vertical-align: middle;

             &--circled {
                 border-radius: 50%;
             }
        }
    }
}

