@font-face {
    font-family: 'Vazirmatn';
    src: url('../ttf/Vazirmatn-Medium.ttf') format('truetype');
    src: url('../ttf/Vazirmatn-Light.ttf') format('truetype');
}
.ButtonPrimary {
    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;
    background: var(--color-button-bg);
    border-radius: .3125rem;
    color: var(--color-button-text);
    cursor: pointer;
    font-size: .875rem;
    line-height: 1.25rem;
    min-height: 2.5rem;
    padding: .625rem 1.875rem;
    position: relative;
    text-align: center;
    -webkit-transition: .2s ease;
    transition: .2s ease
}

    .ButtonPrimary, .ButtonPrimary:after {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        -webkit-text-decoration: none;
        text-decoration: none
    }

        .ButtonPrimary:after {
            content: var(--icon-chevron-right);
            font-family: icons,sans-serif;
            font-style: normal;
            font-variant: normal;
            font-weight: 400;
            line-height: 1;
            text-transform: none
        }

@media (min-width:640px) {
    .ButtonPrimary {
        font-size: 1.125rem;
        line-height: 1.75rem;
        min-height: 3rem;
        padding: .625rem 2.5rem
    }
}

.ButtonPrimary:after {
    font-size: .75rem;
    font-weight: 700;
    opacity: 0;
    position: absolute;
    right: 1.25rem;
    -webkit-transition: .2s ease;
    transition: .2s ease
}

.ButtonPrimary.is-active, .ButtonPrimary:hover:not(.is-disabled) {
    background: var(--color-button-bg-hover)
}

    .ButtonPrimary.is-active:after, .ButtonPrimary:hover:not(.is-disabled):after {
        opacity: 1;
        right: 1rem
    }

.ButtonPrimary.is-disabled, .ButtonPrimary[disabled] {
    background: var(--color-button-disabled);
    cursor: not-allowed;
    pointer-events: none
}

.ButtonPrimary.is-active {
    background: var(--color-button-bg-active)
}

.ButtonPrimary--s {
    min-height: 2rem;
    padding: .375rem 1.375rem
}

    .ButtonPrimary--s:after {
        right: .625rem
    }

    .ButtonPrimary--s.is-active:after, .ButtonPrimary--s:hover:not(.is-disabled):after {
        right: .3125rem
    }

@media (min-width:640px) {
    .ButtonPrimary--s {
        min-height: 2.5rem;
        padding: .375rem 1.375rem
    }
}

.ButtonPrimary--play {
    padding-right: 2.5rem
}

    .ButtonPrimary--play:after {
        font-family: icons,sans-serif;
        font-style: normal;
        font-variant: normal;
        font-weight: 400;
        line-height: 1;
        -webkit-text-decoration: none;
        text-decoration: none;
        text-transform: none;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        content: var(--icon-play);
        font-size: .625rem;
        opacity: 1;
        right: .9375rem;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%)
    }

@media (min-width:640px) {
    .ButtonPrimary--play:after {
        font-size: .75rem
    }
}

.ButtonPrimary--play.is-active:after, .ButtonPrimary--play:hover:not(.is-disabled):after {
    right: .8125rem
}

.ButtonPrimary--inverted {
    color: var(--color-button-inverted-text,var(--color-button-text))
}

    .ButtonPrimary--inverted, .ButtonPrimary--inverted.is-active, .ButtonPrimary--inverted:hover:not(.is-disabled) {
        background: var(--color-button-inverted-bg,var(--color-button-bg))
    }

        .ButtonPrimary--inverted.is-active:after, .ButtonPrimary--inverted:hover:not(.is-disabled):after {
            color: var(--color-button-inverted-text,var(--color-button-text))
        }

.ButtonPrimary--wide-mobile {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-width: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-top: .5rem
}

@media (min-width:640px) {
    .ButtonPrimary--wide-mobile {
        margin-top: 0;
        min-width: 5.4375rem
    }
}