@use '../abstracts/cds-vars' as vars;
@use '../abstracts/cds-mixins' as mixins;

.cds-buttondeck {
    border-radius: vars.$cds-border-radius-50;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    white-space: nowrap;
    width: 100%;
    flex: 1 1 200px;

    &__text {
        @include mixins.cds-paragraph-m;
        text-align: center;
    }

    &__icon {
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--cds-color-text-subtle);
    }

    &__details {
        color: var(--cds-color-text-muted);
        text-wrap: wrap;
        text-align: center;
    }

    &:disabled {
        pointer-events: none !important;
    }

    //SIZE MODIFIERS
        &--medium {
            padding: vars.$cds-spacing-100 vars.$cds-spacing-200;
            gap: 0;
    
            .cds-buttondeck__icon::before {
                @include mixins.cds-icon-size(vars.$cds-icon-150);
            }
    
            .cds-buttondeck__text {
                @include mixins.cds-paragraph-m;
            }
    
            .cds-buttondeck__details {
                @include mixins.cds-paragraph-s;
            }
        }
    &--large {
        padding: vars.$cds-spacing-200;
        gap: vars.$cds-spacing-25;

        .cds-buttondeck__icon::before {
            @include mixins.cds-icon-size(vars.$cds-icon-200);
        }

        .cds-buttondeck__text {
            @include mixins.cds-paragraph-l;
        }

        .cds-buttondeck__details {
            @include mixins.cds-paragraph-m;
        }
    }

    //VARIANT MODIFIERS
    &--secondary {
        @include mixins.cds-secondary;

        &:hover {
            @include mixins.cds-secondary--hover;
        }

        &:active {
            @include mixins.cds-secondary--active;
        }

        &:disabled, &.is-disabled  {
            @include mixins.cds-secondary--disabled;
        }
    }
}