@import "variables";
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

// Text
//MKT
.at-mkt {
    &-h1 {
        font-family: 'Montserrat', sans-serif;
        font-weight: 400;
        font-size: 11.313rem;
        color: $at-gray-90;
        &.bold {
            font-weight: 700;
        }
        &.support {
            color: $at-gray-50;
        }
        &.disabled {
            color: $at-gray-20;
        }
        &.ligth {
            color: $at-gray-10;
        }
    }
    &-h2 {
        font-family: 'Montserrat', sans-serif;
        font-weight: 400;
        font-size: 8rem;
        color: $at-gray-90;
        &.bold {
            font-weight: 700;
        }
        &.support {
            color: $at-gray-50;
        }
        &.disabled {
            color: $at-gray-20;
        }
        &.ligth {
            color: $at-gray-10;
        }
    }
    &-h3 {
        font-family: 'Montserrat', sans-serif;
        font-weight: 400;
        font-size: 5.625rem;
        color: $at-gray-90;
        &.bold {
            font-weight: 700;
        }
        &.support {
            color: $at-gray-50;
        }
        &.disabled {
            color: $at-gray-20;
        }
        &.ligth {
            color: $at-gray-10;
        }
    }
    &-h4 {
        font-family: 'Montserrat', sans-serif;
        font-weight: 400;
        font-size: 4rem;
        color: $at-gray-90;
        &.bold {
            font-weight: 700;
        }
        &.support {
            color: $at-gray-50;
        }
        &.disabled {
            color: $at-gray-20;
        }
        &.ligth {
            color: $at-gray-10;
        }
    }
    &-h5 {
        font-family: 'Montserrat', sans-serif;
        font-weight: 400;
        font-size: 2.813rem;
        color: $at-gray-90;
        &.bold {
            font-weight: 700;
        }
        &.support {
            color: $at-gray-50;
        }
        &.disabled {
            color: $at-gray-20;
        }
        &.ligth {
            color: $at-gray-10;
        }
    }
    &-subtitle-1 {
        font-family: 'Lato', sans-serif;
        font-weight: 400;
        font-size: 2rem;
        color: $at-gray-90;
        &.bold {
            font-weight: 700;
        }
        &.support {
            color: $at-gray-50;
        }
        &.disabled {
            color: $at-gray-20;
        }
        &.ligth {
            color: $at-gray-10;
        }
    }
    &-subtitle-2 {
        font-family: 'Lato', sans-serif;
        font-weight: 400;
        font-size: 1.438rem;
        color: $at-gray-90;
        &.bold {
            font-weight: 700;
        }
        &.support {
            color: $at-gray-50;
        }
        &.disabled {
            color: $at-gray-20;
        }
        &.ligth {
            color: $at-gray-10;
        }
    }
    &-body-1 {
        font-family: 'Lato', sans-serif;
        font-weight: 400;
        font-size: 1rem;
        color: $at-gray-90;
        &.bold {
            font-weight: 700;
        }
        &.support {
            color: $at-gray-50;
        }
        &.disabled {
            color: $at-gray-20;
        }
        &.ligth {
            color: $at-gray-10;
        }
        &.success {
            color: $at-secondary-50;
        }
        &.danger {
            color: $at-red-50;
        }
        &.link {
            color: $at-tertiary-50;
        }
    }
    &-body-2 {
        font-family: 'Lato', sans-serif;
        font-weight: 400;
        font-size: 0.688rem;
        color: $at-gray-90;
        &.bold {
            font-weight: 700;
        }
        &.support {
            color: $at-gray-50;
        }
        &.disabled {
            color: $at-gray-20;
        }
        &.ligth {
            color: $at-gray-10;
        }
        &.success {
            color: $at-secondary-50;
        }
        &.danger {
            color: $at-red-50;
        }
        &.link {
            color: $at-tertiary-50;
        }
    }
    &-caption {
        font-family: 'Lato', sans-serif;
        font-weight: 400;
        font-size: 0.5rem;
        color: $at-gray-90;
        &.bold {
            font-weight: 700;
        }
        &.support {
            color: $at-gray-50;
        }
        &.disabled {
            color: $at-gray-20;
        }
        &.ligth {
            color: $at-gray-10;
        }
        &.success {
            color: $at-secondary-50;
        }
        &.danger {
            color: $at-red-50;
        }
        &.link {
            color: $at-tertiary-50;
        }
    }
    &-legal {
        font-family: 'Lato', sans-serif;
        font-weight: 400;
        font-size: 0.375rem;
        color: $at-gray-90;
        &.bold {
            font-weight: 700;
        }
        &.support {
            color: $at-gray-50;
        }
        &.disabled {
            color: $at-gray-20;
        }
        &.ligth {
            color: $at-gray-10;
        }
        &.success {
            color: $at-secondary-50;
        }
        &.danger {
            color: $at-red-50;
        }
        &.link {
            color: $at-tertiary-50;
        }
    }
}

//Blog
.at-blog {
    &-h1 {
        font-family: 'Montserrat', sans-serif;
        font-weight: 400;
        font-size: 6rem;
        color: $at-gray-90;
        &.bold {
            font-weight: 700;
        }
        &.support {
            color: $at-gray-50;
        }
        &.disabled {
            color: $at-gray-20;
        }
        &.ligth {
            color: $at-gray-10;
        }
    }
    &-h2 {
        font-family: 'Montserrat', sans-serif;
        font-weight: 400;
        font-size: 3.813rem;
        color: $at-gray-90;
        &.bold {
            font-weight: 700;
        }
        &.support {
            color: $at-gray-50;
        }
        &.disabled {
            color: $at-gray-20;
        }
        &.ligth {
            color: $at-gray-10;
        }
    }
    &-h3 {
        font-family: 'Montserrat', sans-serif;
        font-weight: 400;
        font-size: 3rem;
        color: $at-gray-90;
        &.bold {
            font-weight: 700;
        }
        &.support {
            color: $at-gray-50;
        }
        &.disabled {
            color: $at-gray-20;
        }
        &.ligth {
            color: $at-gray-10;
        }
    }
    &-h4 {
        font-family: 'Montserrat', sans-serif;
        font-weight: 400;
        font-size: 2.438rem;
        color: $at-gray-90;
        &.bold {
            font-weight: 700;
        }
        &.support {
            color: $at-gray-50;
        }
        &.disabled {
            color: $at-gray-20;
        }
        &.ligth {
            color: $at-gray-10;
        }
    }
    &-h5 {
        font-family: 'Montserrat', sans-serif;
        font-weight: 400;
        font-size: 1.938rem;
        color: $at-gray-90;
        &.bold {
            font-weight: 700;
        }
        &.support {
            color: $at-gray-50;
        }
        &.disabled {
            color: $at-gray-20;
        }
        &.ligth {
            color: $at-gray-10;
        }
    }
    &-subtitle-1 {
        font-family: 'Lato', sans-serif;
        font-weight: 400;
        font-size: 1.563rem;
        color: $at-gray-90;
        &.bold {
            font-weight: 700;
        }
        &.support {
            color: $at-gray-50;
        }
        &.disabled {
            color: $at-gray-20;
        }
        &.ligth {
            color: $at-gray-10;
        }
    }
    &-subtitle-2 {
        font-family: 'Lato', sans-serif;
        font-weight: 400;
        font-size: 1.25rem;
        color: $at-gray-90;
        &.bold {
            font-weight: 700;
        }
        &.support {
            color: $at-gray-50;
        }
        &.disabled {
            color: $at-gray-20;
        }
        &.ligth {
            color: $at-gray-10;
        }
    }
    &-body-1 {
        font-family: 'Lato', sans-serif;
        font-weight: 400;
        font-size: 1rem;
        color: $at-gray-90;
        &.bold {
            font-weight: 700;
        }
        &.support {
            color: $at-gray-50;
        }
        &.disabled {
            color: $at-gray-20;
        }
        &.ligth {
            color: $at-gray-10;
        }
        &.success {
            color: $at-secondary-50;
        }
        &.danger {
            color: $at-red-50;
        }
        &.link {
            color: $at-tertiary-50;
        }
    }
    &-body-2 {
        font-family: 'Lato', sans-serif;
        font-weight: 400;
        font-size: 0.813rem;
        color: $at-gray-90;
        &.bold {
            font-weight: 700;
        }
        &.support {
            color: $at-gray-50;
        }
        &.disabled {
            color: $at-gray-20;
        }
        &.ligth {
            color: $at-gray-10;
        }
        &.success {
            color: $at-secondary-50;
        }
        &.danger {
            color: $at-red-50;
        }
        &.link {
            color: $at-tertiary-50;
        }
    }
    &-caption {
        font-family: 'Lato', sans-serif;
        font-weight: 400;
        font-size: 0.625rem;
        color: $at-gray-90;
        &.bold {
            font-weight: 700;
        }
        &.support {
            color: $at-gray-50;
        }
        &.disabled {
            color: $at-gray-20;
        }
        &.ligth {
            color: $at-gray-10;
        }
        &.success {
            color: $at-secondary-50;
        }
        &.danger {
            color: $at-red-50;
        }
        &.link {
            color: $at-tertiary-50;
        }
    }
    &-legal {
        font-family: 'Lato', sans-serif;
        font-weight: 400;
        font-size: 0.5rem;
        color: $at-gray-90;
        &.bold {
            font-weight: 700;
        }
        &.support {
            color: $at-gray-50;
        }
        &.disabled {
            color: $at-gray-20;
        }
        &.ligth {
            color: $at-gray-10;
        }
        &.success {
            color: $at-secondary-50;
        }
        &.danger {
            color: $at-red-50;
        }
        &.link {
            color: $at-tertiary-50;
        }
    }
}

//Prod
.at-prod {
    &-h1 {
        font-family: 'Montserrat', sans-serif;
        font-weight: 400;
        font-size: 2.25rem;
        color: $at-gray-90;
        &.bold {
            font-weight: 700;
        }
        &.support {
            color: $at-gray-50;
        }
        &.disabled {
            color: $at-gray-20;
        }
        &.ligth {
            color: $at-gray-10;
        }
    }
    &-h2 {
        font-family: 'Montserrat', sans-serif;
        font-weight: 400;
        font-size: 2rem;
        color: $at-gray-90;
        &.bold {
            font-weight: 700;
        }
        &.support {
            color: $at-gray-50;
        }
        &.disabled {
            color: $at-gray-20;
        }
        &.ligth {
            color: $at-gray-10;
        }
    }
    &-h3 {
        font-family: 'Montserrat', sans-serif;
        font-weight: 400;
        font-size: 1.813rem;
        color: $at-gray-90;
        &.bold {
            font-weight: 700;
        }
        &.support {
            color: $at-gray-50;
        }
        &.disabled {
            color: $at-gray-20;
        }
        &.ligth {
            color: $at-gray-10;
        }
    }
    &-h4 {
        font-family: 'Montserrat', sans-serif;
        font-weight: 400;
        font-size: 1.688rem;
        color: $at-gray-90;
        &.bold {
            font-weight: 700;
        }
        &.support {
            color: $at-gray-50;
        }
        &.disabled {
            color: $at-gray-20;
        }
        &.ligth {
            color: $at-gray-10;
        }
    }
    &-h5 {
        font-family: 'Montserrat', sans-serif;
        font-weight: 400;
        font-size: 1.438rem;
        color: $at-gray-90;
        &.bold {
            font-weight: 700;
        }
        &.support {
            color: $at-gray-50;
        }
        &.disabled {
            color: $at-gray-20;
        }
        &.ligth {
            color: $at-gray-10;
        }
    }
    &-subtitle-1 {
        font-family: 'Lato', sans-serif;
        font-weight: 400;
        font-size: 1.25rem;
        color: $at-gray-90;
        &.bold {
            font-weight: 700;
        }
        &.support {
            color: $at-gray-50;
        }
        &.disabled {
            color: $at-gray-20;
        }
        &.ligth {
            color: $at-gray-10;
        }
    }
    &-subtitle-2 {
        font-family: 'Lato', sans-serif;
        font-weight: 400;
        font-size: 1.125rem;
        color: $at-gray-90;
        &.bold {
            font-weight: 700;
        }
        &.support {
            color: $at-gray-50;
        }
        &.disabled {
            color: $at-gray-20;
        }
        &.ligth {
            color: $at-gray-10;
        }
    }
    &-body-1 {
        font-family: 'Lato', sans-serif;
        font-weight: 400;
        font-size: 1rem;
        color: $at-gray-90;
        &.bold {
            font-weight: 700;
        }
        &.support {
            color: $at-gray-50;
        }
        &.disabled {
            color: $at-gray-20;
        }
        &.ligth {
            color: $at-gray-10;
        }
        &.success {
            color: $at-secondary-50;
        }
        &.danger {
            color: $at-red-50;
        }
        &.link {
            color: $at-tertiary-50;
        }
    }
    &-body-2 {
        font-family: 'Lato', sans-serif;
        font-weight: 400;
        font-size: 0.875rem;
        color: $at-gray-90;
        &.bold {
            font-weight: 700;
        }
        &.support {
            color: $at-gray-50;
        }
        &.disabled {
            color: $at-gray-20;
        }
        &.ligth {
            color: $at-gray-10;
        }
        &.success {
            color: $at-secondary-50;
        }
        &.danger {
            color: $at-red-50;
        }
        &.link {
            color: $at-tertiary-50;
        }
    }
    &-caption {
        font-family: 'Lato', sans-serif;
        font-weight: 400;
        font-size: 0.75rem;
        color: $at-gray-90;
        &.bold {
            font-weight: 700;
        }
        &.support {
            color: $at-gray-50;
        }
        &.disabled {
            color: $at-gray-20;
        }
        &.ligth {
            color: $at-gray-10;
        }
        &.success {
            color: $at-secondary-50;
        }
        &.danger {
            color: $at-red-50;
        }
        &.link {
            color: $at-tertiary-50;
        }
    }
    &-legal {
        font-family: 'Lato', sans-serif;
        font-weight: 400;
        font-size: 0.688rem;
        color: $at-gray-90;
        &.bold {
            font-weight: 700;
        }
        &.support {
            color: $at-gray-50;
        }
        &.disabled {
            color: $at-gray-20;
        }
        &.ligth {
            color: $at-gray-10;
        }
        &.success {
            color: $at-secondary-50;
        }
        &.danger {
            color: $at-red-50;
        }
        &.link {
            color: $at-tertiary-50;
        }
    }
}

// Shadows
.at-shadow {
    &-sm {
        box-shadow: 0px 4px 8px 0px #1A21272A;
    }
    &-md {
        box-shadow: 0px 8px 16px 0px #1A21272A;
    }
    &-lg {
        box-shadow: 0px 15px 20px 0px #1A21272A;
    }
    &-xl {
        box-shadow: 0px 48px 56px 0px #1A21272A;
    }
}

// Border Radius
.at-radius {
    &-xs {
        border-radius: 4px;
    }
    &-s {
        border-radius: 8px;
    }
    &-m {
        border-radius: 16px;
    }
    &-l {
        border-radius: 24px;
    }
    &-xl {
        border-radius: 50%;
    }
}

// Outline
.outline {
    border-width: 1px; // default size
    border-style: solid; // default style
    // sizes
    &-2 {
        border-width: 2px;
    }
    &-3 {
        border-width: 3px;
    }
    &-4 {
        border-width: 4px;
    }
    &-5 {
        border-width: 5px;
    }
    // styles
    &-dotted {
        border-style: dotted
    }
    &-dashed {
        border-style: dashed;
    }
    // colors
    // gray - primary
    &-primary {
        &-10 {
            border-color: $at-primary-10;
        }
        &-20 {
            border-color: $at-primary-20;
        }
        &-30 {
            border-color: $at-primary-30;
        }
        &-40 {
            border-color: $at-primary-40;
        }
        &-50 {
            border-color: $at-primary-50;
        }
        &-60 {
            border-color: $at-primary-60;
        }
        &-70 {
            border-color: $at-primary-70;
        }
        &-80 {
            border-color: $at-primary-80;
        }
        &-90 {
            border-color: $at-primary-90;
        }
    }
    // green - secondary
    &-secondary {
        &-10 {
            border-color: $at-secondary-10;
        }
        &-20 {
            border-color: $at-secondary-20;
        }
        &-30 {
            border-color: $at-secondary-30;
        }
        &-40 {
            border-color: $at-secondary-40;
        }
        &-50 {
            border-color: $at-secondary-50;
        }
        &-60 {
            border-color: $at-secondary-60;
        }
        &-70 {
            border-color: $at-secondary-70;
        }
        &-80 {
            border-color: $at-secondary-80;
        }
        &-90 {
            border-color: $at-secondary-90;
        }
    }
    // blue - tertiary
    &-tertiary {
        &-10 {
            border-color: $at-tertiary-10;
        }
        &-20 {
            border-color: $at-tertiary-20;
        }
        &-30 {
            border-color: $at-tertiary-30;
        }
        &-40 {
            border-color: $at-tertiary-40;
        }
        &-50 {
            border-color: $at-tertiary-50;
        }
        &-60 {
            border-color: $at-tertiary-60;
        }
        &-70 {
            border-color: $at-tertiary-70;
        }
        &-80 {
            border-color: $at-tertiary-80;
        }
        &-90 {
            border-color: $at-tertiary-90;
        }
    }
    // magenta
    &-magenta {
        &-10 {
            border-color: $at-magenta-10;
        }
        &-20 {
            border-color: $at-magenta-20;
        }
        &-30 {
            border-color: $at-magenta-30;
        }
        &-40 {
            border-color: $at-magenta-40;
        }
        &-50 {
            border-color: $at-magenta-50;
        }
        &-60 {
            border-color: $at-magenta-60;
        }
        &-70 {
            border-color: $at-magenta-70;
        }
        &-80 {
            border-color: $at-magenta-80;
        }
        &-90 {
            border-color: $at-magenta-90;
        }
    }
    // orange
    &-orange {
        &-10 {
            border-color: $at-orange-10;
        }
        &-20 {
            border-color: $at-orange-20;
        }
        &-30 {
            border-color: $at-orange-30;
        }
        &-40 {
            border-color: $at-orange-40;
        }
        &-50 {
            border-color: $at-orange-50;
        }
        &-60 {
            border-color: $at-orange-60;
        }
        &-70 {
            border-color: $at-orange-70;
        }
        &-80 {
            border-color: $at-orange-80;
        }
        &-90 {
            border-color: $at-orange-90;
        }
    }
    // purple
    &-purple {
        &-10 {
            border-color: $at-purple-10;
        }
        &-20 {
            border-color: $at-purple-20;
        }
        &-30 {
            border-color: $at-purple-30;
        }
        &-40 {
            border-color: $at-purple-40;
        }
        &-50 {
            border-color: $at-purple-50;
        }
        &-60 {
            border-color: $at-purple-60;
        }
        &-70 {
            border-color: $at-purple-70;
        }
        &-80 {
            border-color: $at-purple-80;
        }
        &-90 {
            border-color: $at-purple-90;
        }
    }
    // red
    &-red {
        &-10 {
            border-color: $at-red-10;
        }
        &-20 {
            border-color: $at-red-20;
        }
        &-30 {
            border-color: $at-red-30;
        }
        &-40 {
            border-color: $at-red-40;
        }
        &-50 {
            border-color: $at-red-50;
        }
        &-60 {
            border-color: $at-red-60;
        }
        &-70 {
            border-color: $at-red-70;
        }
        &-80 {
            border-color: $at-red-80;
        }
        &-90 {
            border-color: $at-red-90;
        }
    }
    // teal
    &-teal {
        &-10 {
            border-color: $at-teal-10;
        }
        &-20 {
            border-color: $at-teal-20;
        }
        &-30 {
            border-color: $at-teal-30;
        }
        &-40 {
            border-color: $at-teal-40;
        }
        &-50 {
            border-color: $at-teal-50;
        }
        &-60 {
            border-color: $at-teal-60;
        }
        &-70 {
            border-color: $at-teal-70;
        }
        &-80 {
            border-color: $at-teal-80;
        }
        &-90 {
            border-color: $at-teal-90;
        }
    }
    // yellow
    &-yellow {
        &-10 {
            border-color: $at-yellow-10;
        }
        &-20 {
            border-color: $at-yellow-20;
        }
        &-30 {
            border-color: $at-yellow-30;
        }
        &-40 {
            border-color: $at-yellow-40;
        }
        &-50 {
            border-color: $at-yellow-50;
        }
        &-60 {
            border-color: $at-yellow-60;
        }
        &-70 {
            border-color: $at-yellow-70;
        }
        &-80 {
            border-color: $at-yellow-80;
        }
        &-90 {
            border-color: $at-yellow-90;
        }
    }
    // gray
    &-gray {
        &-10 {
            border-color: $at-gray-10;
        }
        &-20 {
            border-color: $at-gray-20;
        }
        &-30 {
            border-color: $at-gray-30;
        }
        &-40 {
            border-color: $at-gray-40;
        }
        &-50 {
            border-color: $at-gray-50;
        }
        &-60 {
            border-color: $at-gray-60;
        }
        &-70 {
            border-color: $at-gray-70;
        }
        &-80 {
            border-color: $at-gray-80;
        }
        &-90 {
            border-color: $at-gray-90;
        }
    }
    &-at {
        &-primary {
            &-green {
                border-color: $at-primary-green;
            }
            &-blue {
                border-color: $at-primary-blue;
            }
            &-black {
                border-color: $at-primary-black;
            }
        }
        &-secondary {
            &-mint {
                border-color: $at-mint;
            }
            &-sky {
                border-color: $at-sky;
            }
            &-light-gray {
                border-color: $at-light-gray;
            }
            &-green {
                border-color: $at-green;
            }
            &-blue {
                border-color: $at-blue;
            }
            &-dark-gray {
                border-color: $at-dark-gray;
            }
        }
    }
    &-gradient {
        &-green-blue {
            border-color: $at-green-blue;
        }
        &-blue-gray {
            border-color: $at-blue-gray;
        }
    }
}

// Alerts
.at-alert {
    padding: 1.125rem;
    display: flex;
    justify-content: space-between;
    .close-icon {
        color: $at-gray-50;
    }
    //sizes
    &-s {
        width: 20rem;
        height: auto;
    }
    &-m {
        width: 36rem;
        height: auto;
    }
    &-l {
        width: 62rem;
        height: auto;
    }
    //colors
    &-primary {
        background-color: $at-primary-20;
        border: 1px solid $at-primary-50;
        .info-icon {
            color: $at-primary-50;
        }
    }
    &-secondary {
        background-color: $at-secondary-20;
        border: 1px solid $at-secondary-50;
        .info-icon {
            color: $at-secondary-50;
        }
    }
    &-tertiary {
        background-color: $at-tertiary-20;
        border: 1px solid $at-tertiary-50;
        .info-icon {
            color: $at-tertiary-50;
        }
    }
    &-magenta {
        background-color: $at-magenta-20;
        border: 1px solid $at-magenta-50;
        .info-icon {
            color: $at-magenta-50;
        }
    }
    &-orange {
        background-color: $at-orange-20;
        border: 1px solid $at-orange-50;
        .info-icon {
            color: $at-orange-50;
        }
    }
    &-purple {
        background-color: $at-purple-20;
        border: 1px solid $at-purple-50;
        .info-icon {
            color: $at-purple-50;
        }
    }
    &-red {
        background-color: $at-red-20;
        border: 1px solid $at-red-50;
        .info-icon {
            color: $at-red-50;
        }
    }
    &-teal {
        background-color: $at-teal-20;
        border: 1px solid $at-teal-50;
        .info-icon {
            color: $at-teal-50;
        }
    }
    &-yellow {
        background-color: $at-yellow-20;
        border: 1px solid $at-yellow-50;
        .info-icon {
            color: $at-yellow-50;
        }
    }
    &-gray {
        background-color: $at-gray-20;
        border: 1px solid $at-gray-50;
        .info-icon {
            color: $at-gray-50;
        }
    }
}

.at-avatar {
    color: $at-gray-10;
    // sizes
    &-s {
        width: 1.5rem;
        height: 1.5rem;
        font-size: 0.75rem;
    }
    &-m {
        width: 2rem;
        height: 2rem;
        font-size: 0.875rem;
    }
    &-l {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1rem;
    }
    // color
    &-primary {
        background-color: $at-primary-50;
    }
    &-secondary {
        background-color: $at-secondary-50;
    }
    &-tertiary {
        background-color: $at-tertiary-50;
    }
    &-magenta {
        background-color: $at-magenta-50;
    }
    &-orange {
        background-color: $at-orange-50;
    }
    &-purple {
        background-color: $at-purple-50;
    }
    &-red {
        background-color: $at-red-50;
    }
    &-teal {
        background-color: $at-teal-50;
    }
    &-yellow {
        background-color: $at-yellow-50;
    }
    &-gray {
        background-color: $at-gray-50;
    }
}

.at-badge {
    display: flex;
}

.at-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    appearance: none;
    border: none;
    border-radius: 0.25rem;
    color: $at-gray-10;
    text-decoration: none;
    cursor: pointer;
    background-position: center;
    transition: background 0.8s;
    width: max-content;
    &:focus {
        outline: none;
    }
    &-s {
        height: 1.5rem;
        font-size: 0.75rem;
        padding: 0.25rem 0.75rem;
    }
    &-m {
        height: 2rem;
        font-size: 0.875rem;
        padding: 0.5rem 1rem;
    }
    &-l {
        height: 3rem;
        font-size: 1rem;
        padding: 0.813rem 1.5rem;
    }
    &-filled {
        &:disabled {
            background-color: $at-gray-30;
            color: $at-gray-50;
            cursor: default;
            &:hover {
                background-color: $at-gray-30;
            }
        }
        &-primary {
            background-color: $at-primary-50;
            &:hover {
                background: $at-primary-60 radial-gradient(circle, transparent 1%, $at-primary-60 1%) center/15000%;
            }
            &:active {
                background-color: $at-primary-40;
                background-size: 100%;
                transition: background 0s
            }
            &:focus {
                color: $at-gray-90;
            }
        }
        &-secondary {
            background-color: $at-secondary-50;
            &:hover {
                background: $at-secondary-60 radial-gradient(circle, transparent 1%, $at-secondary-60 1%) center/15000%;
            }
            &:active {
                background-color: $at-secondary-40;
                background-size: 100%;
                transition: background 0s
            }
            &:focus {
                color: $at-gray-90;
            }
        }
        &-tertiary {
            background-color: $at-tertiary-50;
            &:hover {
                background: $at-tertiary-60 radial-gradient(circle, transparent 1%, $at-tertiary-60 1%) center/15000%;
            }
            &:active {
                background-color: $at-tertiary-40;
                background-size: 100%;
                transition: background 0s
            }
            &:focus {
                color: $at-gray-90;
            }
        }
        &-magenta {
            background-color: $at-magenta-50;
            &:hover {
                background: $at-magenta-60 radial-gradient(circle, transparent 1%, $at-magenta-60 1%) center/15000%;
            }
            &:active {
                background-color: $at-magenta-40;
                background-size: 100%;
                transition: background 0s
            }
            &:focus {
                color: $at-gray-90;
            }
        }
        &-orange {
            background-color: $at-orange-50;
            &:hover {
                background: $at-orange-60 radial-gradient(circle, transparent 1%, $at-orange-60 1%) center/15000%;
            }
            &:active {
                background-color: $at-orange-40;
                background-size: 100%;
                transition: background 0s
            }
            &:focus {
                color: $at-gray-90;
            }
        }
        &-purple {
            background-color: $at-purple-50;
            &:hover {
                background: $at-purple-60 radial-gradient(circle, transparent 1%, $at-purple-60 1%) center/15000%;
            }
            &:active {
                background-color: $at-purple-40;
                background-size: 100%;
                transition: background 0s
            }
            &:focus {
                color: $at-gray-90;
            }
        }
        &-red {
            background-color: $at-red-50;
            &:hover {
                background: $at-red-60 radial-gradient(circle, transparent 1%, $at-red-60 1%) center/15000%;
            }
            &:active {
                background-color: $at-red-40;
                background-size: 100%;
                transition: background 0s
            }
            &:focus {
                color: $at-gray-90;
            }
        }
        &-teal {
            background-color: $at-teal-50;
            &:hover {
                background: $at-teal-60 radial-gradient(circle, transparent 1%, $at-teal-60 1%) center/15000%;
                ;
            }
            &:active {
                background-color: $at-teal-40;
                background-size: 100%;
                transition: background 0s
            }
            &:focus {
                color: $at-gray-90;
            }
        }
        &-yellow {
            background-color: $at-yellow-50;
            &:hover {
                background: $at-yellow-60 radial-gradient(circle, transparent 1%, $at-yellow-60 1%) center/15000%;
            }
            &:active {
                background-color: $at-yellow-40;
                background-size: 100%;
                transition: background 0s
            }
            &:focus {
                color: $at-gray-90;
            }
        }
        &-gray {
            background-color: $at-gray-50;
            &:hover {
                background: $at-gray-60 radial-gradient(circle, transparent 1%, $at-gray-60 1%) center/15000%;
            }
            &:active {
                background-color: $at-gray-40;
                background-size: 100%;
                transition: background 0s;
            }
            &:focus {
                color: $at-gray-90;
            }
        }
    }
    &-outline {
        &:disabled {
            background: transparent;
            border: 1px solid $at-gray-30;
            color: $at-gray-20;
            cursor: default;
        }
        &-primary {
            background: transparent;
            border: 1px solid $at-primary-50;
            color: $at-primary-50;
            &:hover {
                background: $at-primary-20 radial-gradient(circle, transparent 1%, $at-primary-20 1%) center/15000%;
            }
            &:active {
                background-color: $at-primary-30;
                background-size: 100%;
                transition: background 0s;
            }
            &:focus {
                background-color: $at-primary-30;
            }
        }
        &-secondary {
            background: transparent;
            border: 1px solid $at-secondary-50;
            color: $at-secondary-50;
            &:hover {
                background: $at-secondary-20 radial-gradient(circle, transparent 1%, $at-secondary-20 1%) center/15000%;
            }
            &:active {
                background-color: $at-secondary-30;
                background-size: 100%;
                transition: background 0s;
            }
            &:focus {
                background-color: $at-secondary-30;
            }
        }
        &-tertiary {
            background: transparent;
            border: 1px solid $at-tertiary-50;
            color: $at-tertiary-50;
            &:hover {
                background: $at-tertiary-20 radial-gradient(circle, transparent 1%, $at-tertiary-20 1%) center/15000%;
            }
            &:active {
                background-color: $at-tertiary-30;
                background-size: 100%;
                transition: background 0s;
            }
            &:focus {
                background-color: $at-tertiary-30;
            }
        }
        &-magenta {
            background: transparent;
            border: 1px solid $at-magenta-50;
            color: $at-magenta-50;
            &:hover {
                background: $at-magenta-20 radial-gradient(circle, transparent 1%, $at-magenta-20 1%) center/15000%;
            }
            &:active {
                background-color: $at-magenta-30;
                background-size: 100%;
                transition: background 0s;
            }
            &:focus {
                background-color: $at-magenta-30;
            }
        }
        &-orange {
            background: transparent;
            border: 1px solid $at-orange-50;
            color: $at-orange-50;
            &:hover {
                background: $at-orange-20 radial-gradient(circle, transparent 1%, $at-orange-20 1%) center/15000%;
            }
            &:active {
                background-color: $at-orange-30;
                background-size: 100%;
                transition: background 0s;
            }
            &:focus {
                background-color: $at-orange-30;
            }
        }
        &-purple {
            background: transparent;
            border: 1px solid $at-purple-50;
            color: $at-purple-50;
            &:hover {
                background: $at-purple-20 radial-gradient(circle, transparent 1%, $at-purple-20 1%) center/15000%;
            }
            &:active {
                background-color: $at-purple-30;
                background-size: 100%;
                transition: background 0s;
            }
            &:focus {
                background-color: $at-purple-30;
            }
        }
        &-red {
            background: transparent;
            border: 1px solid $at-red-50;
            color: $at-red-50;
            &:hover {
                background: $at-red-20 radial-gradient(circle, transparent 1%, $at-red-20 1%) center/15000%;
            }
            &:active {
                background-color: $at-red-30;
                background-size: 100%;
                transition: background 0s;
            }
            &:focus {
                background-color: $at-red-30;
            }
        }
        &-teal {
            background: transparent;
            border: 1px solid $at-teal-50;
            color: $at-teal-50;
            &:hover {
                background: $at-teal-20 radial-gradient(circle, transparent 1%, $at-teal-20 1%) center/15000%;
            }
            &:active {
                background-color: $at-teal-30;
                background-size: 100%;
                transition: background 0s;
            }
            &:focus {
                background-color: $at-teal-30;
            }
        }
        &-yellow {
            background: transparent;
            border: 1px solid $at-yellow-50;
            color: $at-yellow-50;
            &:hover {
                background: $at-yellow-20 radial-gradient(circle, transparent 1%, $at-yellow-20 1%) center/15000%;
            }
            &:active {
                background-color: $at-yellow-30;
                background-size: 100%;
                transition: background 0s;
            }
            &:focus {
                background-color: $at-yellow-30;
            }
        }
        &-gray {
            background: transparent;
            border: 1px solid $at-gray-50;
            color: $at-gray-50;
            &:hover {
                background: $at-gray-20 radial-gradient(circle, transparent 1%, $at-gray-20 1%) center/15000%;
            }
            &:active {
                background-color: $at-gray-30;
                background-size: 100%;
                transition: background 0s;
            }
            &:focus {
                background-color: $at-gray-30;
            }
        }
    }
    &-text {
        &:disabled {
            background: transparent;
            color: $at-gray-20;
            cursor: default;
        }
        &-primary {
            background: transparent;
            color: $at-primary-50;
            &:hover {
                background: $at-primary-20 radial-gradient(circle, transparent 1%, $at-primary-20 1%) center/15000%;
            }
            &:active {
                background-color: $at-primary-30;
                background-size: 100%;
                transition: background 0s;
            }
            &:focus {
                background-color: $at-primary-30;
            }
        }
        &-secondary {
            background: transparent;
            color: $at-secondary-50;
            &:hover {
                background: $at-secondary-20 radial-gradient(circle, transparent 1%, $at-secondary-20 1%) center/15000%;
            }
            &:active {
                background-color: $at-secondary-30;
                background-size: 100%;
                transition: background 0s;
            }
            &:focus {
                background-color: $at-secondary-30;
            }
        }
        &-tertiary {
            background: transparent;
            color: $at-tertiary-50;
            &:hover {
                background: $at-tertiary-20 radial-gradient(circle, transparent 1%, $at-tertiary-20 1%) center/15000%;
            }
            &:active {
                background-color: $at-tertiary-30;
                background-size: 100%;
                transition: background 0s;
            }
            &:focus {
                background-color: $at-tertiary-30;
            }
        }
        &-magenta {
            background: transparent;
            color: $at-magenta-50;
            &:hover {
                background: $at-magenta-20 radial-gradient(circle, transparent 1%, $at-magenta-20 1%) center/15000%;
            }
            &:active {
                background-color: $at-magenta-30;
                background-size: 100%;
                transition: background 0s;
            }
            &:focus {
                background-color: $at-magenta-30;
            }
        }
        &-orange {
            background: transparent;
            color: $at-orange-50;
            &:hover {
                background: $at-orange-20 radial-gradient(circle, transparent 1%, $at-orange-20 1%) center/15000%;
            }
            &:active {
                background-color: $at-orange-30;
                background-size: 100%;
                transition: background 0s;
            }
            &:focus {
                background-color: $at-orange-30;
            }
        }
        &-purple {
            background: transparent;
            color: $at-purple-50;
            &:hover {
                background: $at-purple-20 radial-gradient(circle, transparent 1%, $at-purple-20 1%) center/15000%;
            }
            &:active {
                background-color: $at-purple-30;
                background-size: 100%;
                transition: background 0s;
            }
            &:focus {
                background-color: $at-purple-30;
            }
        }
        &-red {
            background: transparent;
            color: $at-red-50;
            &:hover {
                background: $at-red-20 radial-gradient(circle, transparent 1%, $at-red-20 1%) center/15000%;
            }
            &:active {
                background-color: $at-red-30;
                background-size: 100%;
                transition: background 0s;
            }
            &:focus {
                background-color: $at-red-30;
            }
        }
        &-teal {
            background: transparent;
            color: $at-teal-50;
            &:hover {
                background: $at-teal-20 radial-gradient(circle, transparent 1%, $at-teal-20 1%) center/15000%;
            }
            &:active {
                background-color: $at-teal-30;
                background-size: 100%;
                transition: background 0s;
            }
            &:focus {
                background-color: $at-teal-30;
            }
        }
        &-yellow {
            background: transparent;
            color: $at-yellow-50;
            &:hover {
                background: $at-yellow-20 radial-gradient(circle, transparent 1%, $at-yellow-20 1%) center/15000%;
            }
            &:active {
                background-color: $at-yellow-30;
                background-size: 100%;
                transition: background 0s;
            }
            &:focus {
                background-color: $at-yellow-30;
            }
        }
        &-gray {
            background: transparent;
            color: $at-gray-50;
            &:hover {
                background: $at-gray-20 radial-gradient(circle, transparent 1%, $at-gray-20 1%) center/15000%;
            }
            &:active {
                background-color: $at-gray-30;
                background-size: 100%;
                transition: background 0s;
            }
            &:focus {
                background-color: $at-gray-30;
            }
        }
    }
}

@media screen and (min-width: 320px) {}