@import "shared/mixins-and-vars";

@skip-link-width: 100%;

/* Traditional skip links */
.enable-visible-on-focus {
    .enable__visually-hidden();

    &:focus {
        .enable__visually-hidden--reverse();
        width: @skip-link-width;

        /*
    * We use a negative outline-offset here. If we didn't,
    * the outline would get cut off due to the container's
    * `overflow: hidden` property
    */
        outline-offset: -1px;
    }

    &__container {
        display: block;
        width: @skip-link-width;
        height: 0;
        overflow: hidden;

        &:focus-within {
            height: auto;
            overflow: auto;
        }
    }
}

.enable-mobile-visible-on-focus {
    /* Make sure the width and margin-left are the same value */
    margin-left: @skip-link-width;

    &:focus {
        /*
     * We use a negative outline-offset here. If we didn't,
     * the outline would get cut off due to the container's
     * `overflow: hidden` property
     */
        outline-offset: -1px;
    }

    &__container {
        display: block;
        width: @skip-link-width;
        overflow: hidden;
        pointer-events: none;
        z-index: 2;

        // to make it hidden
        clip: rect(1px, 1px, 1px, 1px);
        position: absolute;

        &:focus-within {
            outline: solid 2px @focus-color;
            outline-offset: 2px;
            z-index: 2;

            a {
                outline: none;
            }
        }

        &--visible {
            clip: auto;
            position: relative;
            pointer-events: auto;
        }
    }
}

.enable-skip-link {
    /* Here is the general styles of the link */
    color: @dark-grey !important;
    width: @skip-link-width;
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    background: @light-grey;
    padding: 10px;
    text-decoration: none;
    font-weight: bold;
    text-align: center;

    &--begin {
        top: 0;
    }

    &--end {
        bottom: 0;
    }
}

/* This is just a mock of the component */
.fake-component {
    display: block;
    height: 200px;
    width: 100%;
    position: relative;
    color: black;
    padding: 10px;
    overflow-y: scroll;
    border: solid 1px #ccc;
}