$quickaccess-height-md: 31.25rem;
$quickaccess-height: 6.25rem;

.c-live-quickaccess {
    @apply bg-white;
    box-shadow: 0 0 1rem rgba(0, 0, 0, .1);
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: $quickaccess-height;
    z-index: 10;
    transition: transform .3s ease-in-out;

    @screen md {
        width: 6.25rem;
        height: $quickaccess-height-md;
        right: 0;
        left: auto;
        bottom: auto;
        top: 50%;
        transform: translateY(-50%);
    }
}

.c-live-quickaccess--inactive {
    transform: translateY(100%);

    @screen md {
        transform: translate(100%, -50%);
    }
}

.c-live-quickaccess__inner {
    @apply h-full flex flex-row;

    @screen md {
        @apply flex-col;
    }
}

.c-live-quickaccess__dynamic-content-loader {
    @apply flex items-center justify-center;

    height: 100%;
    width: 60%;

    @screen md {
        width: 100%;
        height: 60%;
    }
}

.c-live-quickaccess-item {
    @apply flex p-1 flex-col items-center justify-center text-primary-500;

    transition: background-color 0.3s, color 0.3s;
    cursor: pointer;
    width: 20%;
    height: 100%;

    @screen md {
        height: 20%;
        width: 100%;
    }

    &:hover,
    &:focus-visible {
        @apply text-white bg-primary-500;
    }
}

.c-live-quickaccess-item--inverted {
    @apply bg-primary-500 text-white;

    &:hover,
    &:focus-visible {
        @apply bg-primary-600 text-white;
    }
}

.c-live-quickaccess-item__title {
    @apply mt-2;

    font-size: .875rem;
    line-height: 1.25;
    text-align: center;
}

.c-live-quickaccess-item__dot {
    @apply mt-2;
    width: .5rem;
    height: .5rem;
    background-color: currentColor;
    border-radius: 50%;
    animation: livePulse 2.5s infinite;
}

.c-live-quickaccess-item__icon {
    max-width: 2rem;
    max-height: 2rem;
    color: currentColor;
    fill: currentColor;
    cursor: pointer;
}
