.icon-card {
    position: relative;
    top: -8px;
    transition: var(--default-transition);

    .title {
        color: var(--grey-100);
        font-weight: var(--main-font-bolder);
        line-height: 24px;
        letter-spacing: 0.011em;
    }

    .description {
        margin-top: 8px;
        color: var(--grey-80);
        font-weight: var(--main-font-regular);
        font-size: var(--default-font-size);
        line-height: 20px;
        letter-spacing: 0.003em;
    }

    .card {
        position: relative;
        top: 8px;
        z-index: 1;
        transition: var(--default-transition);

        &.mod-small .logo:not(.custom-logo-size) {
            width: 40px;
            height: 40px;
        }
    }

    .logo:not(.custom-logo-size) {
        width: 72px;
        height: 72px;
    }

    &.disabled {
        .logo,
        .title {
            filter: opacity(0.5);
        }

        .card {
            box-shadow: none;
        }
    }

    &.animateOnHover {
        &:hover {
            transform: translate3d(0, -8px, 0);

            .card {
                box-shadow: var(--medium-elevation-on-light);
            }
        }

        &.open .card {
            box-shadow: var(--low-elevation-on-light);
        }
    }
}

.icon-card-drawer {
    justify-content: space-between;
    padding: 40px 36px 32px;
    background-color: var(--grey-20);
    border-right: $default-border;
    border-bottom: $default-border;
    border-left: $default-border;
    border-radius: 0 0 8px 8px;

    .icon-card-drawer-choice {
        font-weight: normal;
        font-size: 16px;
    }

    &.mod-small {
        flex-direction: column;
        align-items: flex-start;
        padding: 30px 24px 22px;

        .icon-card-drawer-choice {
            margin: 0.5rem 0;

            &:first-child {
                margin-top: 0;
            }

            &:last-child {
                margin-bottom: 0;
            }
        }
    }
}