@import url('./components.css');

/* ---------- button css ------------ */

.btn {
    font-size: 1.2rem;
    border: none;
    border-radius: 5px;
    padding: 8px;
    font-weight: bold;
    margin: 5px;
    color: var(--bg-color);
    transition: 0.2s;
}

.btn:hover {
    cursor: pointer;
    transform: scale(1.05);
}

/* primary button */
.btn-primary {
    background-color: var(--primary-color);
}

.btn-secondary {
    background-color: var(--color-dnd);
}

.btn-danger {
    background-color: var(--color-error);
}

.btn-warning {
    background-color: var(--color-warning);
}

.btn-success {
    background-color: var(--color-success);
}

.btn-info {
    background-color: var(--color-info);
}

.btn-outline {
    background-color: var(--bg-color);
    border: solid 2px var(--color-info);
    color: var(--color-info);
}

.btn-transparent {
    background-color: transparent;
    color: var(--text-color);
}

.btn-transparent:hover {
    background-color: var(--color-hover-gray);
    transform: scale(1);
}

.btn-shadow {
    background-color: var(--text-color);
    position: relative;
    transition: ease-in-out;
}

.btn-shadow:hover {
    bottom: 5px;
    right: 5px;
    transform: scale(1);
    box-shadow: 4px 4px 1px 2px var(--color-dnd);
}

/* link button */
.btn-link {
    background-color: var(--color-link);
}

/* icon button */
.btn-round {
    height: 3rem;
    width: 3rem;
    border-radius: 50%;
}

.btn-icon {
    background-color: var(--text-color);
}

/* floating action button */
.btn-fab {
    background-color: var(--color-success);
    box-shadow: 5px 5px 5px var(--color-dnd);
    font-size: 1.5rem;
}

/* docs css */
.primary-button {
    min-height: 15rem;
}