@use "sass:color";

/* Colors. */
$primary-color: #1d574c;
$secondary-color: #1d574c;
$primary-color-opposite: #fff;
$text-color: #333;

.table-structured {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: $text-color;

    &.padded {
        padding: 20px;
        border: 1px solid #ddd;
        border-radius: 8px;
        background-color: #f9f9f9;
    }

    h2 {
        margin-top: 0;
        font-size: 1.5em;
        margin-bottom: 1em;
        color: $text-color;
    }

    h3 {
        font-size: 1.25em;
        margin-top: 1em;
        margin-bottom: 1em;
        color: $text-color;
    }

    .grid {
        display: grid;
        grid-template-columns: 1fr 3fr;
        gap: 0 1em;

        .label {
            font-size: 1em;
            font-weight: bold;
            color: $text-color;
            align-self: center;
        }

        .value {
            font-size: 1em;
            color: $primary-color;

            a {
                text-decoration: none;
                color: $primary-color;
                transition: color 0.2s;

                &:hover {
                    color: $primary-color;
                }
            }
        }
    }

    &.ratio-1-2 {
        .grid {
            grid-template-columns: 1fr 2fr;
        }
    }

    &.separated {
        border-style: solid;
        border-width: 0;
        border-top-width: 1px;
        border-color: $text-color;
    }

    &.distance {
        margin-bottom: 5px;
    }

    &.gapped {
        .grid {
            gap: 1em 2em;
        }
    }
}