.button {
    transition: 0.3s;
    font-weight: 600;

    color: var(--button-enabled-color, white);
    background: var(--button-enabled-bg-color, black);
    border: 1px solid var(--button-enabled-border-color, black);
    text-decoration: none;
}

.button-anchor {
    text-decoration: none;
}

/* colors */
.button.green {
}

.button.green.filled {
    --button-enabled-bg-color: var(--green-50);
    --button-enabled-border-color: var(--green-50);

    --button-hover-bg-color: var(--green-70);
    --button-hover-border-color: var(--green-70);

    --button-selected-bg-color: var(--green-90);
    --button-selected-border-color: var(--green-90);
}

.button.green.outlined {
    --button-enabled-color: var(--green);
    --button-enabled-bg-color: transparent;
    --button-enabled-border-color: var(--green-40);

    --button-hover-color: var(--green);
    --button-hover-bg-color: var(--green-50);
    --button-hover-border-color: var(--green-40);

    --button-selected-color: var(--green-50);
    --button-selected-bg-color: var(--green-50);
    --button-selected-border-color: var(--green-40);
}



.button.teal {
}

.button.teal.filled {
    --button-enabled-bg-color: var(--teal-40);
    --button-enabled-border-color: var(--teal-40);

    --button-hover-bg-color: var(--teal-50);
    --button-hover-border-color: var(--teal-50);

    --button-selected-bg-color: var(--teal-60);
    --button-selected-border-color: var(--teal-60);
}

.button.teal.outlined {
    --button-enabled-color: var(--teal-50);
    --button-enabled-bg-color: transparent;
    --button-enabled-border-color: var(--teal-50);

    --button-hover-color: var(--teal-50);
    --button-hover-bg-color: var(--teal-10);
    --button-hover-border-color: var(--teal-50);

    --button-selected-color: var(--teal-50);
    --button-selected-bg-color: var(--teal-20);
    --button-selected-border-color: var(--teal-50);
}

/* custom orange for class card details (#DD702D) */
.button.orange {}

.button.orange.filled {
    --button-enabled-bg-color: #DD702D;
    --button-enabled-border-color: #DD702D;

    --button-hover-bg-color: #c96227; /* slightly darker */
    --button-hover-border-color: #c96227;

    --button-selected-bg-color: #b25522; /* even darker */
    --button-selected-border-color: #b25522;
}

.button.orange.outlined {
    --button-enabled-color: #DD702D;
    --button-enabled-border-color: #DD702D;

    --button-hover-color: #DD702D;
    --button-hover-bg-color: #ffe3d4; /* light tint */
    --button-hover-border-color: #DD702D;

    --button-selected-color: #DD702D;
    --button-selected-bg-color: #ffc6aa;
    --button-selected-border-color: #DD702D;
}

.button.cyan {
}

.button.cyan.filled {
    --button-enabled-color: var(--cyan-80);
    --button-enabled-bg-color: var(--cyan-30);
    --button-enabled-border-color: var(--cyan-30);

    --button-hover-color: var(--cyan-80);
    --button-hover-bg-color: var(--cyan-40);
    --button-hover-border-color: var(--cyan-40);

    --button-selected-color: var(--cyan-80);
    --button-selected-bg-color: var(--cyan-50);
    --button-selected-border-color: var(--cyan-50);
}

.button.cyan.outlined {
    --button-enabled-color: var(--cyan-60);
    --button-enabled-bg-color: transparent;
    --button-enabled-border-color: var(--cyan-30);

    --button-hover-color: var(--cyan-60);
    --button-hover-bg-color: var(--cyan-10);
    --button-hover-border-color: var(--cyan-30);

    --button-selected-color: var(--cyan-50);
    --button-selected-bg-color: var(--cyan-20);
    --button-selected-border-color: var(--cyan-30);
}

.button.cream {
}

.button.cream.filled {
    --button-enabled-color: var(--black);
    --button-enabled-bg-color: var(--cream);
    --button-enabled-border-color: var(--cream);

    --button-hover-color: var(--black);
    --button-hover-bg-color: var(--cream-200);
    --button-hover-border-color: var(--cream-200);

    --button-selected-color: var(--black);
    --button-selected-bg-color: var(--cream-300);
    --button-selected-border-color: var(--cream-300);
}

.button.cream.outlined {
    --button-enabled-color: var(--black);
    --button-enabled-bg-color: transparent;
    --button-enabled-border-color: var(--cream-500);

    --button-hover-color: var(--black);
    --button-hover-bg-color: var(--cream-50);
    --button-hover-border-color: var(--cream-500);

    --button-selected-color: var(--black); /* changed */
    --button-selected-bg-color: var(--cream-200);
    --button-selected-border-color: var(--cream-500);
}

.button.black {
}

.button.black.filled {
    --button-enabled-color: var(--white);
    --button-enabled-bg-color: var(--black);
    --button-enabled-border-color: var(--black);

    --button-hover-color: var(--white);
    --button-hover-bg-color: var(--cool-gray-600);
    --button-hover-border-color: var(--cool-gray-600);

    --button-selected-color: var(--white);
    --button-selected-bg-color: var(--cool-gray-500);
    --button-selected-border-color: var(--cool-gray-500);
}

.button.black.outlined {
    --button-enabled-color: var(--black);
    --button-enabled-bg-color: transparent;
    --button-enabled-border-color: var(--black);

    --button-hover-color: var(--black);
    --button-hover-bg-color: var(--black-alpha-100);
    --button-hover-border-color: var(--black);

    --button-selected-color: var(--white);
    --button-selected-bg-color: var(--black-alpha-600);
    --button-selected-border-color: var(--white);
}

/* sizes */
.button.s {
    border-radius: 34px;
    padding: 0 20px;
    height: 32px;

    font-size: var(--secondary-font-size);
    letter-spacing: var(--secondary-letter-spacing);
}

.button.m {
    border-radius: 34px;
    padding: 0 32px;
    height: 48px;

    font-size: var(--default-font-size);
    letter-spacing: var(--default-letter-spacing);
}

.button.l {
    border-radius: 34px;
    padding: 0 32px;
    height: 72px;

    font-size: var(--subtitle-font-size);
    letter-spacing: var(--subtitle-letter-spacing);
}

/* states */
.button.enabled {
    color: var(--button-enabled-color);
    background: var(--button-enabled-bg-color);
    border-color: var(--button-enabled-border-color);
}

.button.hovered,
.button.enabled:hover {
    color: var(--button-hover-color);
    background: var(--button-hover-bg-color);
    border-color: var(--button-hover-border-color);
}

.button.selected {
    color: var(--button-selected-color);
    background: var(--button-selected-bg-color);
    border-color: var(--button-selected-border-color);
}

.button.disabled,
.button[disabled] {
    color: var(--button-disabled-color);
    background: var(--button-disabled-bg-color);
    border-color: var(--button-disabled-border-color);
}

.button:not(.disabled):not([disabled]) {
    cursor: pointer;
}

.button.disabled.filled {
    --button-disabled-color: var(--white);
    --button-disabled-bg-color: var(--cool-gray-300);
    --button-disabled-border-color: var(--cool-gray-300);
}

.button.disabled.outlined {
    --button-disabled-color: var(--cool-gray-300);
    --button-disabled-bg-color: transparent;
    --button-disabled-border-color: var(--cool-gray-300);
}


.button.disabled.ghost {
    --button-disabled-color: var(--cool-gray-400);
    --button-disabled-bg-color: transparent;
    --button-disabled-border-color: var(--white);
}

/* types */
.button.filled {
    --button-enabled-color: var(--white);
    --button-hover-color: var(--white);
    --button-selected-color: var(--white);
}

.button.outlined {
}

.button.ghost {
}
/* ghost buttons */
/*.

button.blue.ghost {
    --button-enabled-color: var(--blue);
    --button-enabled-bg-color: transparent;
    --button-enabled-border-color: transparent;

    --button-hover-color: var(--blue);
    --button-hover-bg-color: var(--blue-50);
    --button-hover-border-color: var(--blue-50);

    --button-selected-color: var(--white);
    --button-selected-bg-color: var(--blue-200);
    --button-selected-border-color: var(--blue-200);
}

.button.red.ghost {
    --button-enabled-color: var(--red);
    --button-enabled-bg-color: transparent;
    --button-enabled-border-color: transparent;

    --button-hover-color: var(--red);
    --button-hover-bg-color: var(--red-50);
    --button-hover-border-color: var(--red-50);

    --button-selected-color: var(--white);
    --button-selected-bg-color: var(--red-200);
    --button-selected-border-color: var(--red-200);
}

.button.orange.ghost {
    --button-enabled-color: var(--orange-600);
    --button-enabled-bg-color: transparent;
    --button-enabled-border-color: transparent;

    --button-hover-color: var(--orange-600);
    --button-hover-bg-color: var(--orange-50);
    --button-hover-border-color: var(--orange-50);

    --button-selected-color: var(--white);
    --button-selected-bg-color: var(--orange-200);
    --button-selected-border-color: var(--orange-200);
}

.button.cream.ghost {
    --button-enabled-color: var(--black);
    --button-enabled-bg-color: transparent;
    --button-enabled-border-color: transparent;

    --button-hover-color: var(--black);
    --button-hover-bg-color: var(--cream-50);
    --button-hover-border-color: var(--cream-50);

    --button-selected-color: var(--black);
    --button-selected-bg-color: var(--cream-100);
    --button-selected-border-color: var(--cream-100);
}

.button.black.ghost {
    --button-enabled-color: var(--black);
    --button-enabled-bg-color: transparent;
    --button-enabled-border-color: transparent;

    --button-hover-color: var(--black);
    --button-hover-bg-color: var(--black-alpha-100);
    --button-hover-border-color: var(--black-alpha-100);

    --button-selected-color: var(--white);
    --button-selected-bg-color: var(--black-alpha-600);
    --button-selected-border-color: var(--black-alpha-600);
}

*/