/* ============================================================================
   06-COMPONENTS -> #FEATURED-ICON
   ========================================================================= */

/**
 * An icon with prominent styling to draw a users attention to it.
 */


//
// SCSS imports
//

@use '../01-settings' as *;
@use '../02-tools' as *;


//
// SCSS imports
//

.featured-icon {
    --featured-icon-bg: transparent;
    --featured-icon-border-color: transparent;
    --featured-icon-border-radius: unset;
    --featured-icon-border-size-1: unset;
    --featured-icon-border-size-2: unset;
    --featured-icon-border-width: 0;
    --featured-icon-color: unset;
    --featured-icon-outline-bg: transparent;
    --featured-icon-outline-width: 0;
    --featured-icon-shadow: unset;
    --featured-icon-size: unset;

    align-items: center;
    background-color: var(--featured-icon-bg);
    border: var(--featured-icon-border-width) solid var(--featured-icon-border-color);
    border-radius: var(--featured-icon-border-radius);
    box-shadow: var(--featured-icon-shadow);
    color: var(--featured-icon-color);
    display: inline-flex;
    height: var(--featured-icon-size);
    justify-content: center;
    position: relative;
    width: var(--featured-icon-size);
    z-index: var(--z-index-0);
}




/* MODIFIERS
   ========================================================================= */

/**
 * Modifier: Small featured icon
 */

.featured-icon[data-size=sm] {
    --featured-icon-border-size-1: 1.5rem;
    --featured-icon-border-size-2: 2.125rem;
    --featured-icon-outline-width: .25rem;
    --featured-icon-padding: var(--space-2);
    --featured-icon-size: var(--space-8);

    & > .icon {
        --icon-size: var(--space-4);
    }
}


/**
 * Modifier: Large featured icon
 */

.featured-icon[data-size=md] {
    --featured-icon-border-size-1: 1.75rem;
    --featured-icon-border-size-2: 2.375rem;
    --featured-icon-outline-width: .375rem;
    --featured-icon-size: var(--space-10);
    
    & > .icon {
        --icon-size: var(--space-5);
    }
}


/**
 * Modifier: Large featured icon
 */

.featured-icon[data-size=lg] {
    --featured-icon-border-size-1: 2rem;
    --featured-icon-border-size-2: 2.625rem;
    --featured-icon-outline-width: .5rem;
    --featured-icon-padding: var(--space-3);
    --featured-icon-size: var(--space-12);
    
    & > .icon {
        --icon-size: var(--space-5);
    }
}


/**
 * Modifier: Extra large featured icon
 */

.featured-icon[data-size=xl] {
    --featured-icon-border-size-1: 2.25rem;
    --featured-icon-border-size-2: 2.875rem;
    --featured-icon-outline-width: .625rem;
    --featured-icon-padding: var(--space-4);
    --featured-icon-size: var(--space-14);

    & > .icon {
        --icon-size: var(--space-7);
    }
}


/**
 * Modifier: Primary featured icon
 */

.featured-icon[data-theme=primary] {
    --featured-icon-bg: var(--color-primary-100);
    --featured-icon-border-color: var(--color-primary-200);
    --featured-icon-outline-bg: var(--color-primary-50);
    --featured-icon-color: var(--color-primary-600);
}


/**
 * Modifier: Secondary featured icon
 */

.featured-icon[data-theme=secondary] {
    --featured-icon-bg: var(--color-gray-100);
    --featured-icon-border-color: var(--color-gray-200);
    --featured-icon-outline-bg: var(--color-gray-50);
    --featured-icon-color: var(--color-gray-700);
}


/**
 * Modifier: Success featured icon
 */

.featured-icon[data-theme=success] {
    --featured-icon-bg: var(--color-success-100);
    --featured-icon-border-color: var(--color-success-600);
    --featured-icon-outline-bg: var(--color-success-50);
    --featured-icon-color: var(--color-success-600);
}


/**
 * Modifier: Warning featured icon
 */

.featured-icon[data-theme=warning] {
    --featured-icon-bg: var(--color-warning-100);
    --featured-icon-color: var(--color-warning-600);
}


/**
 * Modifier: Error featured icon
 */

.featured-icon[data-theme=error] {
    --featured-icon-bg: var(--color-error-100);
    --featured-icon-color: var(--color-error-600);
    --featured-icon-outline-bg: var(--color-error-50);
}


/**
 * Modifier: Rings featured icon
 */

.featured-icon[data-rings=true] {
    &::before {
        background-color: var(--border-color-secondary);
        background-size: contain;
        content: '';
        height: 15rem;
        mask-image: url("data:image/svg+xml,%3Csvg width='480' height='480' viewBox='0 0 480 480' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_21_30)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M240 320C284.183 320 320 284.183 320 240C320 195.817 284.183 160 240 160C195.817 160 160 195.817 160 240C160 284.183 195.817 320 240 320ZM240 319C283.63 319 319 283.63 319 240C319 196.37 283.63 161 240 161C196.37 161 161 196.37 161 240C161 283.63 196.37 319 240 319Z' fill='%23EAECF0' fill-opacity='0.85'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M352 239C352 300.856 301.856 351 240 351C178.144 351 128 300.856 128 239C128 177.144 178.144 127 240 127C301.856 127 352 177.144 352 239ZM351 239C351 300.304 301.304 350 240 350C178.696 350 129 300.304 129 239C129 177.696 178.696 128 240 128C301.304 128 351 177.696 351 239Z' fill='%23EAECF0' fill-opacity='0.75'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M240 384C319.529 384 384 319.529 384 240C384 160.471 319.529 96 240 96C160.471 96 96 160.471 96 240C96 319.529 160.471 384 240 384ZM240 383C318.977 383 383 318.977 383 240C383 161.023 318.977 97 240 97C161.023 97 97 161.023 97 240C97 318.977 161.023 383 240 383Z' fill='%23EAECF0' fill-opacity='0.65'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M416 240C416 337.202 337.202 416 240 416C142.798 416 64 337.202 64 240C64 142.798 142.798 64 240 64C337.202 64 416 142.798 416 240ZM415 240C415 336.65 336.65 415 240 415C143.35 415 65 336.65 65 240C65 143.35 143.35 65 240 65C336.65 65 415 143.35 415 240Z' fill='%23EAECF0' fill-opacity='0.55'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M240 448C354.875 448 448 354.875 448 240C448 125.125 354.875 32 240 32C125.125 32 32 125.125 32 240C32 354.875 125.125 448 240 448ZM240 447C354.323 447 447 354.323 447 240C447 125.677 354.323 33 240 33C125.677 33 33 125.677 33 240C33 354.323 125.677 447 240 447Z' fill='%23EAECF0' fill-opacity='0.4'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M480 240C480 372.548 372.548 480 240 480C107.452 480 0 372.548 0 240C0 107.452 107.452 0 240 0C372.548 0 480 107.452 480 240ZM479 240C479 371.996 371.996 479 240 479C108.004 479 1 371.996 1 240C1 108.004 108.004 1 240 1C371.996 1 479 108.004 479 240Z' fill='white' fill-opacity='0.2'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_21_30'%3E%3Crect width='480' height='480' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
        mask-position: center;
        mask-repeat: no-repeat;
        mask-size: contain;
        position: absolute;
        width: 15rem;
        z-index: -1;
    }
}


/**
 * Modifier: Circle featured icon
 */

 .featured-icon[data-variant=circle] {
    --featured-icon-border-radius: 50%;
}


/**
 * Modifier: Circle border featured icon
 */

.featured-icon[data-variant=circle-border] {
    --featured-icon-bg: transparent;
    --featured-icon-border-radius: 50%;
    --featured-icon-border-width: 0.125rem;
    --featured-icon-size: unset;

    border: 0;

    &::before,
    &::after {
        border: var(--featured-icon-border-width) solid var(--featured-icon-color);
        border-radius: 50%;
        content: '';
        left: 50%;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    &::before {
        height: var(--featured-icon-border-size-1);
        opacity: 30%;
        width: var(--featured-icon-border-size-1);
    }

    &::after {
        height: var(--featured-icon-border-size-2);
        opacity: 10%;
        width: var(--featured-icon-border-size-2);
    }
}


/**
 * Modifier: Square featured icon
 */

.featured-icon[data-variant=square] {
    --featured-icon-border-radius: calc(var(--featured-icon-size) / 5);
}


/**
 * Modifier: Square border featured icon
 */

.featured-icon[data-variant=square-border] {
    --featured-icon-bg: transparent !important;
    --featured-icon-border-radius: calc(var(--featured-icon-size) / 5);
    --featured-icon-border-width: var(--border-width);
    --featured-icon-shadow: var(--shadow-xs);
}