@mixin focus-outline {
    outline: 2px solid rgb(from var(--primary-600) r g b / 0);
    outline-offset: 0;
}

@mixin focus-outline-visible($offset: 0) {
    outline-color: var(--primary-600);
    outline-offset: $offset;
}

@mixin focus-ring($offset: 0, $within: false) {
    @include focus-outline;

    @if $within == true {
        &:focus-visible,
        &:focus-within {
            @include focus-outline-visible($offset);
        }
    } @else {
        &:focus-visible {
            @include focus-outline-visible($offset);
        }
    }
}

@mixin focus-ring-pseudo($selector, $offset: 0, $within: false) {
    &::#{$selector} {
        @include focus-outline;
    }

    @if $within == true {
        &:focus-visible::#{$selector},
        &:focus-within::#{$selector} {
            @include focus-outline-visible($offset);
        }
    } @else {
        &:focus-visible::#{$selector} {
            @include focus-outline-visible($offset);
        }
    }
}

@mixin focus-ring-remove {
    outline: 0 !important;
}

@mixin focus-ring-transition($offset: 0, $within: false) {
    transition: var(--transition-default);
    transition-property: focus-ring-transition-properties();

    @include focus-ring($offset, $within);
}

@function focus-ring-transition-properties() {
    @return outline-color, outline-offset;
}