@use 'sass:color';
@use 'variables';

.ring, .ring-1, .ring-2, .ring-inset {
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: #3b82f680;
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-inset {
    --tw-ring-inset: inset;
}

.ring {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 0 var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 0 var(--tw-ring-color);
}

.ring-1 {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 1px var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
}

.ring-2 {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
}

.ring-4 {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
}

.ring-offset-0 {
    --tw-ring-offset-width: 0px;
}

.ring-offset-1 {
    --tw-ring-offset-width: 1px;
}

.ring-offset-2 {
    --tw-ring-offset-width: 2px;
}

.ring-offset-4 {
    --tw-ring-offset-width: 4px;
}

.ring-inherit {
    --tw-ring-color: inherit;
}

.ring-offset-inherit {
    --tw-ring-offset-color: inherit;
}

.ring-current {
    --tw-ring-color: currentColor;
}

.ring-offset-current {
    --tw-ring-offset-color: currentColor;
}

.ring-transparent {
    --tw-ring-color: transparent;
}

.ring-offset-transparent {
    --tw-ring-offset-color: transparent;
}

.ring-black {
    --tw-ring-color: #000;
}

.ring-offset-black {
    --tw-ring-offset-color: #000;
}

.ring-white {
    --tw-ring-color: #fff;
}

.ring-offset-white {
    --tw-ring-offset-color: #fff;
}

@each $colorName, $value in variables.$colors {
    //$r: red($value);
    $r: color.channel($value, 'red', $space: rgb);
    //$g: green($value);
    $g: color.channel($value, 'green', $space: rgb);
    //$b: blue($value);
    $b: color.channel($value, 'blue', $space: rgb);

    .ring-#{$colorName} {
        --tw-ring-opacity: 1;
        --tw-ring-color: rgb(#{$r} #{$g} #{$b} / var(--tw-ring-opacity));
    }

    .ring-offset-#{$colorName} {
        --tw-ring-offset-opacity: 1;
        --tw-ring-offset-color: rgb(#{$r} #{$g} #{$b} / var(--tw-ring-offset-opacity));
    }

    .focus\:ring-#{$colorName}:focus {
        --tw-ring-color: rgb(#{$r} #{$g} #{$b} / var(--tw-ring-opacity));
    }

    .focus\:ring-offset-#{$colorName}:focus {
        --tw-ring-offset-color: rgb(#{$r} #{$g} #{$b} / var(--tw-ring-offset-opacity));
    }
}