/*
 * This file is part of the UX SDC Bundle
 *
 * (c) Jozef Môstka <https://github.com/tito10047/ux-sdc>
 *
 * For the full copyright and license information, please view the LICENSE
 * file that was distributed with this source code.
 */

/* Styles for MicStatus component */
@layer components {
  .mic-status {
    position: relative;
    display: flex;
    align-items: center;

    & .mic-status__link {
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--color-text);
      opacity: 0.5;
      transition: all 0.3s ease;
      text-decoration: none;
      position: relative;

      &:hover {
          opacity: 0.8;
      }
    }

    & .mic-status__icon {
        width: 1.5rem;
        height: 1.5rem;
    }

    /* Stavy */
    &[data-status="ok"] .mic-status__link {
      color: var(--color-success);
      opacity: 1;
    }

    &[data-status="error"] .mic-status__link {
      color: var(--color-error);
      opacity: 1;
    }

    &[data-status="loading"] .mic-status__link {
      animation: pulse 1.5s infinite ease-in-out;
    }

    @keyframes pulse {
      0% { opacity: 0.3; }
      50% { opacity: 0.7; }
      100% { opacity: 0.3; }
    }

    /* Bublina */
    & .mic-status__bubble {
      position: absolute;
      top: calc(100% + var(--space-xs));
      right: 0;
      background: var(--color-error);
      color: white;
      padding: var(--space-xs) var(--space-s);
      border-radius: var(--radius-s);
      font-size: var(--size-step-0);
      white-space: nowrap;
      box-shadow: var(--shadow-m);
      z-index: 100;
      pointer-events: none;

      &::before {
        content: '';
        position: absolute;
        bottom: 100%;
        right: 0.5rem;
        border: 0.5rem solid transparent;
        border-bottom-color: var(--color-error);
      }
    }
  }
}