.root {
    & {
        cursor: pointer;
    }

    &.disabled {
        cursor: default;
    }
}

.small {
    & {
        height: 3rem;
        position: relative;
        transition: background-color .4s ease;
    }

    &-text {
        @include absolute(0, 0, 0, 3rem);
        @include truncate;
        color: $color-dark-foreground;
        font-size: 1rem;
        font-weight: normal;
        line-height: 3rem;
        padding: 0 .8rem;
    }

    &-icon {
        @include absolute(0, auto, 0, 0);
        color: $color-dark-foreground;
        font-size: 1.2rem;
        font-weight: normal;
        line-height: 3.2rem;
        padding: 0 .8rem;
    }
}

.large {
    & {
        @include force-height(100px);
    }

    &.editable {
        cursor: pointer;
    }

    &-link {
        font-size: .8rem;
    }

    &-title {
        font-size: 1rem;
        font-weight: bold;
        line-height: 1;
    }

    &-text {
        font-size: .8rem;
        margin-bottom: .125rem;
        margin-top: .25rem;
    }

    &-icon {
        color: $color-dark-foreground;
        display: inline-block;
        line-height: 1px;
        margin-right: .5rem;
        padding: 1rem;
        position: relative;
    }
}