@import "variables";
@import "commons";

.my-account {
    transition: all .2s;

    &__body {
        overflow: auto;
        height: calc(100%);
        padding-left: 10px;
        padding-right: 10px;
        font-size: $small-font-size;
        padding-bottom: 20px;
        outline: 1px dotted greenyellow;
    }

    &__label {
        font-size: $small-font-size;
        margin-top: 10px;
        margin-left: 5px;
        color: $font-color-secondary;
    }

    &__blue {
        background-color: $color-primary;
        color: #fff;

        &:hover {
            background-color: lighten($color-primary, 15);
        }
    }

    &__red {
        $red-button-color: rgb(65, 3, 3);
        background-color: $red-button-color !important;
        color: #fff;

        &:hover {
            background-color: lighten($red-button-color, 15) !important;
        }
    }

    &__link {
        text-decoration: none;
        display: block; // width: calc(100% - 20px);
        width: 100%; // height: 30px;
        padding: 5px 10px; // border: solid 1px black;

        &--icon {
            float: right;
        }

        &--disabled {
            cursor: default;
            background-color: darken($color-primary, 4);

            &:hover {
                background-color: darken($color-primary, 4);
            }
        }

        &--margin-bottom {
            &:not(:last-child) {
                margin-bottom: 5px;
            }
        }
    }

    &__list {
        $list-width: 60px;
        width: calc(100% - #{$list-width} - 2px);

        &--button {
            margin-left: 1px;
            width: calc(#{$list-width}/2);
            float: right;
            padding: 5px 10px;
            background-color: $color-primary;
            color: #fff;
            color: $font-color-secondary;

            &:hover {
                color: #fff;
                background-color: lighten($color-primary, 15);
            }
        }

        &--new-list-title {
            color: #fff;
            background-color: darken($color-primary, 4);
            border: 2px solid $color-primary;
            width: calc(100% - #{$list-width}/2 - 1px);
            padding: 3px 5px;

            &:focus {
                outline: none !important;
                box-shadow: none;
            }
        }
    }

    &__margin-top {
        margin-top: 25px;
    }
}