flights_web/ClientApp/src/styles/_buttons.scss

button {
    min-height: 35px;
}
button,
a {
    cursor: pointer;
    transition-duration: 0.2s;

    .p-button-label {
        @include font-small();
        font-weight: $font-medium;
        padding-left: 15px;
        padding-right: 15px;
    }

    &.color {
        border: none !important;

        .p-button-label {
            color: $white;
        }

        &.blue {
            background-color: $blue;

            &:hover {
                background-color: $blue--hover;
            }
        }

        &.white {
            background-color: $white;
            border: 1.3px solid $border !important;

            &:hover {
                background-color: $blue-extra-light;
            }

            .p-button-label {
                color: $gray;
            }
        }

        &.download-button {
            border: 1.3px solid $border-blue !important;
            height: $medium-button-height;
            border-radius: $border-radius 0 0 $border-radius;
            width: 100%;
            transition-duration: 0.2s;

            .p-button-label {
                font-weight: $font-medium;
                font-size: 14px;
                text-align: left;
            }
        }

        &.download-button-options {
            border: 1.3px solid $border-blue !important;
            height: $medium-button-height;
            border-radius: 0 $border-radius $border-radius 0;
            background-image: url('~src/assets/img/arr-down.svg');
            background-position: center center;
            background-repeat: no-repeat;
            margin-left: -1px;
            width: $medium-button-height;
        }

        &.orange {
            background-color: $orange;

            &:hover {
                background-color: $orange--hover;
            }
        }

        &.blue-light {
            background-color: $blue-light;

            &:hover {
                background-color: $blue-light--hover;
            }

            &.text-only {
                border-color: none;
                background-color: $white;

                .p-button-label {
                    color: $blue-light;
                }

                &:hover {
                    background-color: $blue-extra-light;
                    border-color: $blue-light--hover;

                    .p-button-label {
                        color: $blue-light--hover;
                    }
                }
            }
        }

        &.blue-glow {
            background: white;

            .p-button-label {
                padding: 0px;
                font-size: $font-size-m;
                color: $blue-light;
            }

            padding: 0px;
            margin: 0px;

            &:hover {
                padding: $space-s;
                margin: -$space-s;
                background: $blue-icon;
            }
        }

        &.blue-home {
            background: transparent;
            border: 1.3px solid $blue-light !important;

            .p-button-label {
                color: $blue-light;
            }

            padding: 0px;
            margin: 0px;

            &:hover {
                border: 1.3px solid $blue !important;

                .p-button-label {
                    color: $blue;
                }
            }
        }
    }

    &.square {
        .p-button-label {
            visibility: hidden;
            display: none;
        }

        .p-button-icon-left {
            display: inline-block;
            top: 0;
            left: 0;
            margin: 0;
            width: 100%;
            height: 100%;
        }

        &.small {
            width: $small-button-height;
            height: $small-button-height;
        }

        &.medium {
            width: $medium-button-height;
            height: $medium-button-height;
        }

        &.standart {
            width: $standard-button-height;
            height: $standard-button-height;
        }

        &.big {
            width: $big-button-height;
            height: $big-button-height;
        }
    }

    &.transparent {
        background-color: transparent;
        border: 1px solid transparent;

        &:hover {
            background-color: transparent !important;
            border-color: $border !important;
        }
    }

    &.close {
        .p-button-label {
            display: none;
        }
    }

    &.icon-left {
        padding-left: 30px;
        background-position: 1em center;
        background-repeat: no-repeat;

        @include font-overflow();
    }

    &.button--spinner {
        display: flex;
        align-items: center;

        .pi {
            display: none;
            color: $gray;
            margin-left: $space-m + $space-s;

            &.show-spinner {
                display: inline-block;
            }
        }
    }
}