@font-face {
    font-family: 'Vazirmatn';
    src: url('../ttf/Vazirmatn-Medium.ttf') format('truetype');
    src: url('../ttf/Vazirmatn-Light.ttf') format('truetype');
}
.ButtonTertiary {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    font-family: Vazirmatn;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: var(--color-button);
    cursor: pointer;
    font-size: .875rem;
    font-weight: 700;
    line-height: .875rem;
    padding-right: 1.125rem;
    position: relative;
    text-align: left;
    -webkit-transition: .2s ease;
    transition: .2s ease
}

    .ButtonTertiary, .ButtonTertiary:after {
        -webkit-text-decoration: none;
        text-decoration: none
    }

        .ButtonTertiary:after {
            font-family: icons,sans-serif;
            font-style: normal;
            font-variant: normal;
            font-weight: 400;
            line-height: 1;
            text-transform: none;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            content: var(--icon-chevron-right)
        }

@media (min-width:640px) {
    .ButtonTertiary {
        font-size: 1.125rem;
        line-height: 1.125rem
    }
}

.ButtonTertiary:hover:not(.is-disabled):not(.is-active) {
    -webkit-text-decoration: underline;
    text-decoration: underline
}

    .ButtonTertiary:hover:not(.is-disabled):not(.is-active):after {
        right: 0
    }

.ButtonTertiary:after {
    color: var(--color-button-arrow);
    font-size: .75rem;
    font-weight: 700;
    position: absolute;
    right: .1875rem;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: .2s ease;
    transition: .2s ease
}

.ButtonTertiary.is-disabled {
    cursor: not-allowed
}

    .ButtonTertiary.is-disabled, .ButtonTertiary.is-disabled:after {
        color: var(--color-button-disabled)
    }

.ButtonTertiary.is-active {
    border-color: var(--color-button-active);
    color: var(--color-button-active)
}

    .ButtonTertiary.is-active:after {
        opacity: 1
    }

.ButtonTertiary.ButtonTertiary--login {
    font-size: .8125rem
}

@media (min-width:960px) {
    .ButtonTertiary.ButtonTertiary--login {
        font-size: .9375rem
    }
}