@use "../utility/globals";

.statusContainer {
  align-items: center;
  display: flex;
  font-family: globals.$font-family;
  width: fit-content;
}

.status {
  border-radius: 1000px;
  height: 20px;
  margin: 6px;
  position: relative;
  width: 20px;

  &.online {
    background-color: rgb(66 237 66);
    height: 16px;
    margin: 8px;
    width: 16px;
  }

  &.online::before {
    animation: pulse 1.2s ease infinite;
    background-color: rgb(66 237 66);
    border-radius: 1000px;
    content: "";
    height: 20px;
    left: -2px;
    position: absolute;
    top: -2px;
    width: 20px;

    @keyframes pulse {
      0% {
        transform: scale(1, 1);
      }

      50% {
        opacity: 0.3;
      }

      100% {
        opacity: 0;
        transform: scale(1.3);
      }
    }
  }

  &.offline {
    background-color: transparent;
    border: 4px solid globals.$primary-background-color;
    box-sizing: border-box;
  }

  &.away {
    background-color: rgb(255 184 51);
    height: 14px;
    margin: 9px;
    width: 14px;
  }

  &.away::before {
    background-color: transparent;
    border: 1px solid rgb(255 184 51);
    border-radius: 1000px;
    box-sizing: border-box;
    content: "";
    display: block;
    height: 20px;
    left: -3px;
    position: relative;
    top: -3px;
    width: 20px;
  }

  &.busy {
    background-color: rgb(240 0 0);
  }

  &.busy::before {
    background-color: white;
    border-radius: 1000px;
    content: "";
    display: block;
    height: 4px;
    left: 4px;
    position: relative;
    top: 8px;
    width: 12px;
    z-index: 1;
  }
}

.label {
  &.online {
    color: rgb(66 237 66);
  }

  &.offline {
    color: globals.$primary-background-color;
  }

  &.away {
    color: rgb(255 184 51);
  }

  &.busy {
    color: rgb(240 0 0);
  }
}