.TagBase {
  --tag-base-typo-color: var(--color-control-typo-ghost);
  --tag-base-half-space: calc(var(--tag-base-spaсe) / 2);
  --tag-border-color: var(--color-platinum);
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  text-align: left;
  overflow: hidden;
  height: var(--tag-base-height);
  padding: var(--tag-base-spaсe-vertical) var(--tag-base-spaсe-horizontal);
  color: var(--tag-base-typo-color);
  background: var(--tag-base-bg-color);
  border: none;
  border-radius: var(--control-radius);
  -webkit-box-shadow: inset 0 0 0 1px var(--tag-base-border-color);
          box-shadow: inset 0 0 0 1px var(--tag-base-border-color);
  font-family: var(--font--primary);
  font-size: var(--tag-base-font-size);
  line-height: var(--tag-base-height);
  text-decoration: none;
  -webkit-transition: background 0.15s ease, color 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: background 0.15s ease, color 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
  transition: box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease, -webkit-box-shadow 0.15s ease;
}

  .TagBase:focus,
  .TagBase:focus:hover {
    outline: none;
  }

  .TagBase_view_stroked {
      --tag-base-border-color: var(--color-control-bg-border-default);
      --tag-base-bg-color: var(--color-bg-default);
    }

  .TagBase_view_gray,
    .TagBase_view_filled {
      --tag-base-border-color: var(--color-blue-primary-dark);
      --tag-base-bg-color: var(--color-blue-primary-dark);
      --tag-base-font-size: var(--size-text-xs);
      --tag-base-spaсe-vertical: calc(var(--space-2xs) + 2px);
      --tag-base-spaсe-horizontal: var(--space-s);
      text-transform: uppercase;
      color: #fff;
      font-weight: var(--font-weight-text-bold);
      border-radius: 2px;
    }

  .TagBase_view_gray .TagBase-Label, .TagBase_view_filled .TagBase-Label {
        position: relative;
      }

  .TagBase_view_gray {
      --tag-base-bg-color: var(--color-platinum);
      --tag-base-border-color: var(--color-platinum);
      color: var(--color-reach-black);
    }

  .TagBase_view_theme {
      letter-spacing: 0.6px;
      text-transform: uppercase;
      font-weight: 600;
      padding-left: 16px;
      overflow: visible;
    }

  .TagBase_view_theme:before {
        width: 6px;
        height: 6px;
        content: '';
        position: absolute;
        top: 5px;
        left: 0;
        -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
        background-color: currentColor;
      }

  .TagBase_view_theme:hover {
        color: var(--color-blue-primary);
      }

  .TagBase_view_theme:active {
        color: var(--color-blue-primary-dark);
      }

  .TagBase_view_info {
      font-size: var(--size-text-xs);
      text-transform: uppercase;
      font-weight: var(--font-weight-text-bold);
      line-height: 1.33;
      letter-spacing: 0.6px;
      --tag-base-spaсe-vertical: 0;
      --tag-base-spaсe-horizontal: 0;
    }

  .TagBase_view_info:before {
        content: '';
        display: inline-block;
        width: 12px;
        height: 12px;
        background-size: cover;
        background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='12px' height='12px' viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3Eico/social/youtube%3C/title%3E%3Cg id='1.-All-Pages' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='COM/Blog_Article_1300' transform='translate(-125.000000, -202.000000)' fill='%230F161A'%3E%3Cg id='Icon' transform='translate(123.000000, 200.000000)'%3E%3Cpath d='M8,2 C11.3137085,2 14,4.6862915 14,8 C14,11.3137085 11.3137085,14 8,14 C4.6862915,14 2,11.3137085 2,8 C2,4.6862915 4.6862915,2 8,2 Z M8,4 C7.44771525,4 7,4.44771525 7,5 L7,8 C7,8.26521649 7.10535684,8.5195704 7.29289322,8.70710678 L9.29289322,10.7071068 C9.68341751,11.0976311 10.3165825,11.0976311 10.7071068,10.7071068 C11.0976311,10.3165825 11.0976311,9.68341751 10.7071068,9.29289322 L9,7.58578644 L9,5 C9,4.44771525 8.55228475,4 8,4 Z'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        margin-right: 8px;
      }

  .TagBase_view_label {
      font-size: 16px;
      line-height: 1;
      padding: 0 var(--space-xs) 9px;
    }

  .TagBase_view_label:before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        border-bottom: 6px solid var(--tag-border-color);
        border-radius: 2px;
      }

  .TagBase_withAction {
    cursor: pointer;
  }

  .TagBase_withAction_view_stroked:hover {
          --tag-base-border-color: var(--color-control-bg-border-default-hover);
        }

  .TagBase_withAction_view_filled:hover {
          --tag-base-bg-color: var(--color-control-bg-ghost-hover);
          --tag-base-border-color: transparent;
        }

  .TagBase_size_xs {
      --tag-base-spaсe: var(--space-2xs);
      --tag-base-font-size: var(--size-text-xs);
    }

  .TagBase_size_s {
      --tag-base-spaсe: var(--space-xs);
      --tag-base-font-size: var(--size-text-xs);
    }

  .TagBase_size_m {
      --tag-base-spaсe: var(--space-xs);
      --tag-base-font-size: var(--size-text-s);
    }

  .TagBase_size_m .TagBase-Label {
        padding-top: 1px;
      }

  .TagBase_size_l {
      --tag-base-spaсe: var(--space-s);
      --tag-base-font-size: var(--size-text-m);
    }

  .TagBase_withCancel {
  }

  .TagBase_withIcon {
    padding-left: 0;
  }

  .TagBase-CancelButton {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    height: var(--tag-base-height);
    padding: 0;
    color: var(--color-control-typo-ghost);
    background: transparent;
    border: none;
    outline: none;
    opacity: 1;
    cursor: pointer;
    -webkit-transition: opacity 0.15s ease;
    transition: opacity 0.15s ease;
    margin-right: var(--space-xs);
    position: relative;
  }

  .TagBase-CancelButton:hover {
      background: transparent;
      outline: none;
      opacity: 1;
    }

  .TagBase-Label {
    height: var(--tag-base-height);
    line-height: var(--tag-base-height);
  }

  .TagBase-IconWrapper {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height: var(--tag-base-height);
    padding: 0 var(--tag-base-half-space) 0 var(--tag-base-half-space);
  }
