code {
    @apply .font-mono .px-2 .py-1;
    background-color: #eef1f6;
    color: #596981;
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, .1);
    display: inline-block;
}

/**
 * Indicators for server online status.
 */
.indicator {
    @apply .bg-grey-darker .border .border-grey;
    border-radius: 50%;
    width: 16px;
    height: 16px;

    &.online {
        @apply .bg-green-dark .border-green;
        animation: onlineblink 2s infinite alternate;
    }

    &.offline {
        @apply .bg-green-dark .border-red;
        animation: offlineblink 2s infinite alternate;
    }
}

/**
 * Usage indicator labels for the server listing.
 */
.usage {
    @apply .flex-1 .text-center .relative;

    & > .indicator-title {
        @apply .text-xs .uppercase .font-hairline .bg-white .absolute .text-grey;
        margin-top:-9px;
        padding: 0 8px;
        left: 50%;
        transform: translate(-50%, 0);
    }
}

/**
 * Styling for elements that contain the core page content.
 */
.content-box {
    @apply .bg-white .p-6 .rounded .shadow-md;
}

/**
 * Flex boxes for server listing on user dashboard.
 */
.server-card-container {
    @apply .mb-4;

    @screen smx {
        @apply .w-full;
    }

    @screen md {
        @apply .w-1/2 .pr-4;

        &:nth-of-type(2n) {
            @apply .pr-0;
        }
    }

    @screen lg {
        @apply .w-1/3 .pr-4;

        &:nth-of-type(2n) {
            @apply .pr-4;
        }

        &:nth-of-type(3n) {
            @apply .pr-0;
        }
    }
}

.server-card {
    @apply .block .no-underline .shadow;
    transition: all 100ms ease-in;

    & .identifier-icon {
        @apply .inline-block .rounded-full .text-white .text-center .leading-none .justify-center .w-8 .h-8 .mr-2 .flex .flex-row .items-center;
    }

    & a, & a:visited {
        @apply .no-underline .text-grey-darkest;
    }

    & > .content {
        @apply .border .border-grey-light .bg-white .no-underline .block .text-black .p-4;
        border-top: 4px solid config('colors.grey-light') !important;
    }

    & > .footer {
        @apply .border .border-grey-light .border-t-0 .bg-grey-lightest;
    }
}

.pillbox {
    @apply .rounded-full .px-2 .py-1 .text-white .font-medium .leading-none .text-xs;
}

.server-search {
    @apply .w-full .my-4;

    & > input[type="text"] {
        @apply .w-full .p-3 .rounded .border .text-grey-darker;
        transition: border 150ms ease-in;

        &:focus {
            @apply .border-blue-light;
        }
    }
}