$default-border-color: #dedce5;
$active-border-color: #428bca;
$text-color: #212533;
$hover-background: #eeebf2;
$error-color: #c13018;
$font-family-base: "Open Sans", sans-serif;
$font-size-base: 14px;
$border-radius-base: 4px;

body {
    .p-select {
        background-color: #fff;
        border: 1px solid #c1c1cc;
        border-radius: $border-radius-base;
        width: 100%;

        .p-select-label {
            align-items: center;
            display: flex;
            width: 100%;
            margin: 7px 10px;
            font-family: $font-family-base;
            font-size: $font-size-base;
            line-height: 1;
            border: none;
            min-height: 21px;

            &.p-placeholder {
                color: $text-color;
            }
        }

        .p-select-dropdown {
            border-left: 1px solid #c1c1cc;
            border-radius: 0 $border-radius-base $border-radius-base 0;
            padding: 0 12px;
        }

        .p-select-clear-icon {
            margin-top: -0.45rem;
            right: 3em;
        }

        &.p-disabled {
            border-color: $default-border-color;

            .p-select-dropdown {
                border-color: $default-border-color;
            }

            .p-select-label,
            .p-select-label.p-placeholder,
            .p-select-dropdown {
                color: $default-border-color;
            }
        }

        &.p-focus {
            border: 1px solid $active-border-color;
            border-color: $active-border-color !important;

            .p-select-label {
                outline: none;
            }

            .p-select-dropdown {
                border-left: 1px solid $active-border-color;
            }
        }

        &:hover {
            .p-select-dropdown {
                background-color: $hover-background;
            }
        }

        &:not(.p-disabled):hover {
            border: 1px solid #c1c1cc;
        }

        &.ng-dirty.ng-invalid {
            &.p-dropdown,
            &.p-dropdown:hover {
                border-color: $error-color !important;

                .p-select-dropdown {
                    border-color: $error-color !important;
                }
            }
        }
        &-header {
            .p-iconfield {
                &-left .p-inputicon {
                    top: 32%;
                    right: 8px;
                }
            }
        }
    }

    .p-select-list-container {
        box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.2);

        .p-select-list {
            border-radius: $border-radius-base;
            overflow: hidden;

            p-selectitem {
                background-color: #fff;

                .p-select-option {
                    color: $text-color;
                    font-family: $font-family-base;
                    font-size: $font-size-base;
                    line-height: 1;
                    padding: 8px 12px;

                    &:hover {
                        background: $hover-background;
                    }
                }
                &:first-child {
                    padding-top: 4px;
                }

                &:last-child {
                    padding-bottom: 4px;
                }
            }

            .p-select-option-group {
                min-height: 21px;
                font-weight: 700;
                color: $text-color;
                padding: 7px 10px;
                font-size: $font-size-base;
                background-color: #fff;
            }
        }
    }
}