portfolio/src/components/molecules/Availability.scss

@import 'variables';

.availability {
    position: absolute;
    bottom: 0;
    border-radius: .25rem;
    color: $text-color-light;
    z-index: 2;
    padding: $spacer / 2;
    display: block;
    transition: opacity .2s ease-out;

    .dark & {
        color: $text-color-light--dark;
    }

    p {
        margin-bottom: 0;
    }

    &.available {
        background: rgba($brand-light, .8);
        color: $brand-main;
        position: fixed;
        bottom: $spacer;

        .dark & {
            background: rgba($body-background-color--dark, .8);
            color: $brand-light;
        }
    }

    a {
        border-bottom: 1px solid rgba($brand-cyan, .4);
    }
}