/* ==========================================================================
   Variables
   ========================================================================== */

/* ==========================================================================
   Base
   ========================================================================== */

.ts-content {
    padding: 1rem 1rem;
    color: inherit;
    display: block;
    text-decoration: none;
    box-sizing: border-box;
}

/* ==========================================================================
   Variations
   ========================================================================== */

/**
 * Fitted
 */

.ts-content.is-fitted {
    padding: 0;
}
.ts-content.is-vertically-fitted {
    padding-top: 0;
    padding-bottom: 0;
}
.ts-content.is-horizontally-fitted {
    padding-left: 0;
    padding-right: 0;
}

/**
 * Dark
 */

.ts-content.has-dark {
    background: var(--ts-gray-50);
    color: var(--ts-gray-800);
}

/**
 * Secondary
 */

.ts-content.is-secondary {
    background: var(--ts-gray-75);
}

/**
 * Tertiary
 */

.ts-content.is-tertiary {
    background: var(--ts-gray-100);
}

/**
 * Aligns
 */

.ts-content.is-start-aligned {
    text-align: left;
}

.ts-content.is-end-aligned {
    text-align: right;
}

.ts-content.is-center-aligned {
    text-align: center;
}

/**
 * Interactive
 */

.ts-content.is-interactive {
    display: block;
    width: 100%;
    text-decoration: none;
    text-align: inherit;
}

.ts-content.is-interactive:hover {
    cursor: pointer;
}

.ts-content.is-interactive:hover:not(.is-active) {
    background: var(--ts-gray-75);
}

/**
 * Active
 */

.ts-content.is-active {
    background: var(--ts-gray-200);
}

/**
 * Disabled
 */

.ts-content.is-disabled,
.ts-content[disabled] {
    opacity: 0.5;
    pointer-events: none;
    user-select: none;
}

/**
 * Rounded
 */

.ts-content.is-rounded {
    border-radius: var(--ts-border-radius-container);
}

/**
 * Padded
 */

.ts-content.is-padded {
    padding: 1.5rem;
}
.ts-content.is-horizontally-padded {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.ts-content.is-vertically-padded {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.ts-content.is-very-padded {
    padding: 3.5rem;
}
.ts-content.is-horizontally-very-padded {
    padding-left: 3.5rem;
    padding-right: 3.5rem;
}
.ts-content.is-vertically-very-padded {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
}

/**
 * Compact
 */

.ts-content.is-compact {
    padding: 0.5rem;
}

/**
 * Dense
 */

.ts-content.is-dense {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
