/* Каскадрые таблицы стилей (его производные) разработаны для проекта
SwallowDashboard, его производных и принаджелат ее автору.
Заимствованные элементы (фрагменты) приналежат их авторам. */

/* Всплывающие подсказки / Tooltips */
/* Ключевые точки / Keyframes */
@keyframes tooltips-vert {
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

@keyframes tooltips-horz {
    to {
        opacity: 1;
        transform: translate(0, -50%);
    }
}
/* Основные стили / Base styles */
[tooltip] {
    position: relative; 
  }
  [tooltip]::before,
  [tooltip]::after {
    text-transform: none; 
    font-size: .9em; 
    line-height: 1;
    user-select: none;
    pointer-events: none;
    position: absolute;
    display: none;
    opacity: 0;
  }
  [tooltip]::before {
    content: ''; 
    border: 5px solid transparent; 
    z-index: 1001; 
  }
  [tooltip]::after {
    content: attr(tooltip); 
    font-family: Helvetica, sans-serif;
    text-align: center;
    min-width: 3em;
    max-width: 30em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 1ch 1.5ch;
    border-radius: 5px;
    background: var(--color-standart-black);
    color: #fff;
    z-index: 1000; 
  }
  [tooltip]:hover::before,
  [tooltip]:hover::after {
    display: block;
  }
  [tooltip='']::before,
  [tooltip='']::after {
    display: none !important;
  }
  
  /* Подсказки: направление - верх / Tooltip: flow - up */
  [tooltip]:not([flow])::before,
  [tooltip][flow^="up"]::before {
    bottom: 100%;
    border-bottom-width: 0;
    border-top-color: var(--color-standart-black);
  }
  [tooltip]:not([flow])::after,
  [tooltip][flow^="up"]::after {
    bottom: calc(100% + 5px);
  }
  [tooltip]:not([flow])::before,
  [tooltip]:not([flow])::after,
  [tooltip][flow^="up"]::before,
  [tooltip][flow^="up"]::after {
    left: 50%;
    transform: translate(-50%, 0);
  }
  
  /* Подсказки: направление - низ / Tooltip: flow - down */
  [tooltip][flow^="down"]::before {
    top: 100%;
    border-top-width: 0;
    border-bottom-color: var(--color-standart-black);
  }
  [tooltip][flow^="down"]::after {
    top: calc(100% + 5px);
  }
  [tooltip][flow^="down"]::before,
  [tooltip][flow^="down"]::after {
    left: 50%;
    transform: translate(-50%, 0);
  }
  
  /* Подсказки: направление - лево / Tooltip: flow - left */
  [tooltip][flow^="left"]::before {
    top: 50%;
    border-right-width: 0;
    border-left-color: var(--color-standart-black);
    left: calc(0em - 5px);
    transform: translate(0, -50%);
  }
  [tooltip][flow^="left"]::after {
    top: 50%;
    right: calc(100% + 5px);
    transform: translate(0, -50%);
  }

  /* Подсказки: направление - право / Tooltip: flow - right */
  [tooltip][flow^="right"]::before {
    top: 50%;
    border-left-width: 0;
    border-right-color: var(--color-standart-black);
    right: calc(0em - 5px);
    transform: translate(0, -50%);
  }
  [tooltip][flow^="right"]::after {
    top: 50%;
    left: calc(100% + 5px);
    transform: translate(0, -50%);
  }

  /* Вспомогательные вещи / Help things */ 
  [tooltip]:not([flow]):hover::before,
  [tooltip]:not([flow]):hover::after,
  [tooltip][flow^="up"]:hover::before,
  [tooltip][flow^="up"]:hover::after,
  [tooltip][flow^="down"]:hover::before,
  [tooltip][flow^="down"]:hover::after {
    animation: tooltips-vert 300ms ease-out forwards;
  }
  
  [tooltip][flow^="left"]:hover::before,
  [tooltip][flow^="left"]:hover::after,
  [tooltip][flow^="right"]:hover::before,
  [tooltip][flow^="right"]:hover::after {
    animation: tooltips-horz 300ms ease-out forwards;
  }