/* почти полные нативные копии реактовских компонтентов
заброшенной библиотеки Yandex UI kit
https://yastatic.net/s3/frontend/lego/storybook/index.html?path=/docs/guides-documentation--readme */

.y-button {
    position: relative;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -moz-user-focus: ignore;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-align: center;
    white-space: nowrap;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 8px;
    /* outline: 0; */ /* необходимо создать состояние :focus */
    background: none;
    color: #000;
    line-height: 1;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    -webkit-box-shadow: none;
    box-shadow: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    text-overflow: ellipsis;
    -webkit-transition: background .15s linear,
                color .15s linear,
                border 0.15s linear,
                -webkit-box-shadow .15s linear,
                -webkit-transform .1s ease-out;
    transition: background .15s linear,
                color .15s linear,
                border 0.15s linear,
                -webkit-box-shadow .15s linear,
                -webkit-transform .1s ease-out;
    -o-transition: background .15s linear,
                box-shadow .15s linear,
                color .15s linear,
                transform .1s ease-out,
                border 0.15s linear;
    transition: background .15s linear,
                box-shadow .15s linear,
                color .15s linear,
                transform .1s ease-out,
                border 0.15s linear;
    transition: background .15s linear,
                box-shadow .15s linear,
                color .15s linear,
                transform .1s ease-out,
                border 0.15s linear,
                -webkit-box-shadow .15s linear,
                -webkit-transform .1s ease-out;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
            align-items: center;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding: 0 1em;
}
.y-button:active {
    -webkit-transform: scale(0.96);
    -ms-transform: scale(0.96);
    transform: scale(0.96);
}
.y-button--size-s {
    height: 32px;
    font-size: 14px;
}
.y-button--size-m {
    height: 36px;
    font-size: 15px;
}
.y-button--size-l {
    height: 42px;
    font-size: 18px;
}
.y-button--view-action {
    background-color: #ffcc00;
    border-color: #ffcc00;
}
.y-button--view-action:hover {
    background-color: #fac000;
    border-color: #fac000;
}
.y-button--view-pseudo {
    background-color: #fff;
    border-color: #CCCCCC;
}
.y-button--view-pseudo:hover {
    background-color: #F7F7F7;
}
.y-button--view-link {
    color: #04b;
    background-color: #fff;
    border-color: #0044bb99;
}
.y-button--view-link:hover {
    color: #04b;
    background-color: #0044bb4d;
}
.y-button--disabled {
    color: #808080;
    background-color: #f2f2f2;
    border-color: #f2f2f2;
    cursor: default;
    pointer-events: none;
}

/* определяем input более "узким" классом .y-input для избежания конфликта */
/* с более общим классом .input, определенным в bem-components */
.y-input{
    height: 32px;
    padding: .65em 1em;
    font-family: inherit;
    font-size: 14px;
    color: #000;
    font-weight: 400;
    line-height: 1;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    background-color: #FFFFFF;

    /* для страницы детализации кампаний, */
    /* т.к. там подключен старый style.css */
    box-sizing: border-box;

    -webkit-transition: border .15s linear;
    -o-transition: border .15s linear;
    transition: border .15s linear;
}
.y-input:hover{
	outline: none;
    border-color: #CCCCCC;
}
.y-input:focus{
	outline: none;
    border-color: #FFDB4D;
}
.y-input::placeholder{
	font-size: 14px;
	line-height: 1;
	color: #888888;
}
.y-input--error {
    border-color: #d006;
}
.y-input--error:hover {
    outline: none;
    border-color: #d009;
}
.y-input--error:focus {
    outline: none;
    border-color: #d009;
}

/* переименовываю textarea в y-textarea */
/* дабы избежать коллизи с bem-components */
/* y-textarea */
.y-textarea{
    padding: .65em 1em;
    font-family: inherit;
    font-size: 14px;
    color: #000;
    font-weight: 400;
    line-height: 1;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    background-color: #FFFFFF;

    /* для страницы детализации кампаний, */
    /* т.к. там подключен старый style.css */
    box-sizing: border-box;

    -webkit-transition: border .15s linear;
    -o-transition: border .15s linear;
    transition: border .15s linear;

    scrollbar-width: thin;
}
.y-textarea:hover{
	outline: none;
    border-color: #CCCCCC;
}
.y-textarea:focus{
	outline: none;
    border-color: #FFDB4D;
}
.y-textarea::placeholder{
	font-size: 14px;
	line-height: 1;
	color: #888888;
}
.y-textarea--error {
    border-color: #d006;
}
.y-textarea--error:hover {
    outline: none;
    border-color: #d009;
}
.y-textarea--error:focus {
    outline: none;
    border-color: #d009;
}

/* переименовываю select в y-select */
/* дабы избежать коллизи с bem-components */
/* y-select */
.y-select{
    height: 32px;

    padding: 0 1.9em 0 0.9em;

    font-size: 14px;
    font-weight: 400;
    color: #000;
    line-height: calc(16/13);

    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;

    cursor: pointer;
    
    -webkit-transition: border .15s linear;
    -o-transition: border .15s linear;
    transition: border .15s linear;
}
.y-select:hover{
    border: 1px solid #CCCCCC;
}
.y-select:disabled{
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(0, 0, 0, 0.08);

    pointer-events: none;
    cursor: auto;
}



.y-link {
    font-family: 'Exo 2', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.2;
    color: #0054b9;
    text-decoration: none;

    cursor: pointer;

    -webkit-transition: color .15s linear, border 0.15s linear, -webkit-text-decoration .15s linear;
    transition: color .15s linear, border 0.15s linear, -webkit-text-decoration .15s linear;
    -o-transition: color .15s linear, text-decoration .15s linear, border 0.15s linear;
    transition: color .15s linear, text-decoration .15s linear, border 0.15s linear;
    transition: color .15s linear, text-decoration .15s linear, border 0.15s linear, -webkit-text-decoration .15s linear;
}
.y-link:hover {
    text-decoration: none;
    color: #E50000;
}
.y-link--black {
    color: #000;
}
.y-link--ghost {
    color: #999;
}
.y-link--ghost:hover {
    color: #000;
}
.y-link--brown {
    color: #A46D00;
}
.y-link--purple {
    color: #8D67CC;
}
.y-link--fw700 {
    font-weight: 700;
}
.y-link--fz12 {
    font-size: 12px;
}
.y-link--fz16 {
    font-size: 16px;
}
.y-link--lh113pct {
    line-height: 113%;
}
.y-link--lh116pct {
    line-height: 116%;
}
.y-link--lh119pct {
    line-height: 119%;
}
.y-link--underline {
    text-decoration: underline;
}
.y-link--underline:hover {
    text-decoration: underline;
}
.y-link--dotted {
    text-decoration: underline;
    text-decoration-style: dotted;
}
.y-link--dotted:hover {
    text-decoration: underline;
    text-decoration-style: dotted;
}
.y-link--dashed {
    text-decoration: underline;
    text-decoration-style: dashed;
}
.y-link--dashed:hover {
    text-decoration: underline;
    text-decoration-style: dashed;
}
.y-button--icon {
    /* КОСТЫЛЬ для выравнивания кнопки с картинкой внутри */
    vertical-align: bottom;
}
.y-link--disabled {
    color: rgba(0, 0, 0, 0.3);
    text-decoration: none;
    cursor: default;
    pointer-events: none;
}