@use "sass:math";

/**
 * Resource rights modal.
 */

.resource-rights-simple {
    padding: $modal-inner-padding;

    .resource-rights-simple-group {
        display: flex;
        justify-content: space-around;
        align-items: stretch;
    }

    .simple-right {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: map-get($spacers, 3);
        color: var(--#{$prefix}tertiary-color);
        border: none;

        @include border-radius($border-radius);

        &:focus,
        &:hover,
        &:active {
            color: var(--#{$prefix}secondary-color);
            background: var(--#{$prefix}tertiary-bg);
            box-shadow: none;

            .simple-right-icon {
                border-color: var(--#{$prefix}secondary-color);
            }
        }

        &.selected {
            font-weight: $font-weight-bolder;
            color: var(--#{$prefix}primary-text-emphasis);
            background: var(--#{$prefix}primary-bg-subtle);

            .simple-right-icon {
                border-color: var(--#{$prefix}primary-text-emphasis);
            }
        }

        & + .simple-right {
            margin-left: map-get($spacers, 1);
        }
    }

    .simple-right-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 10px;
        margin-bottom: map-get($spacers, 3);
        font-size: 40px;
        width: 80px;
        height: 80px;
        border: 2px solid var(--#{$prefix}tertiary-color);

        @include border-radius($border-radius);
    }

    .simple-right-label {
        font-size: $font-size-sm;
        display: block;
        white-space: normal;
        max-width: 100%;
    }
}
