// Button

//.btn {
//    font-size: 1.6rem;
//    border: 1px solid transparent;
//    padding: 0.5rem 1rem;
//    border-radius: 0.5rem;
//    cursor: pointer;
//    box-shadow: 1px 1px 2px $grey;
//    text-decoration: none;
//    transition: background-color 0.2s, color 0.2s;
//
//    &:hover {
//        transition: background-color 0.2s, color 0.2s;
//        background-color: $mediumDark;
//        color: $white;
//    }
//}
//
//.btn-primary {
//    @extend .btn;
//    background-color: $medium;
//    border-color: $medium;
//    color: $white;
//
//    &:visited,
//    &:focus {
//        color: $white;
//    }
//}
//
//.btn-secondary {
//    @extend .btn;
//    background-color: $mediumLight;
//    border-color: $mediumLight;
//    color: $dark;
//}
//
//.btn-alert {
//    @extend .btn;
//    background-color: $error;
//    border-color: $error;
//    color: $white;
//
//    &:hover {
//        background-color: $dark;
//    }
//}
//
//.btn-icon {
//    @extend .btn;
//    display: flex;
//    align-items: center;
//    height: 4rem;
//
//    &:hover svg {
//        fill: $white;
//    }
//
//    svg {
//        height: 3rem;
//        margin-right: 1rem;
//
//        &:hover {
//            fill: $white;
//        }
//    }
//}

.btn {
    @apply border bg-orange-400 text-white py-2 px-4 shadow-sm rounded-md;

    &:hover {
        @apply text-white bg-orange-600 transition-all duration-300;
    }

    svg {
        @apply w-4 fill-current mr-2 inline;
    }
}

.btn-primary {
    @extend .btn;
    @apply bg-orange-600;

    &:hover {
        @apply bg-orange-800;
    }
}

.btn-secondary {
    @extend .btn;
    @apply bg-orange-600;

    &:hover {
        @apply bg-orange-800;
    }
}

.btn-alert {
    @extend .btn;
    @apply bg-red-600 text-white;

    &:hover {
        @apply bg-red-800;
    }
}