.phone_call_dialer {
  gap: 1rem;
  background-color: var(--color-bg-overlay);
  border-radius: var(--border-radius);
  padding: 1.5rem 1rem 3rem;
  margin: 0;
  width: var(--size-full);

  /* tablet */
  @media (min-width: 600px) {
    gap: 2rem;
    padding: 1.5rem 1.5rem 3rem;
  }
}

.phone-number-input-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

.country-code-select {
  grid-area: country;

  /* tablet */
  @media (min-width: 600px) {
    max-width: 110px;
  }

  &:focus {
    max-height: 300px;
    overflow-y: auto;
  }
}

.phone-number-input {
  grid-area: number;

  &:disabled {
    background-color: var(--bg-disabled, #f5f5f5);
    color: var(--text-disabled, #9ca3af);
    cursor: not-allowed;
    opacity: 0.6;
  }
}

.number-button {
  background-color: var(--color-bg-elevated);
  color: var(--color-text);
  border-radius: 50%;
  height: 4rem;
  width: 4rem;
  padding: 1rem;
  font-size: 1.25rem;
  cursor: pointer;
  box-shadow: var(--box-shadow);
  border: 1px solid var(--color-border);

  /* tablet */
  @media (min-width: 600px) {
    height: 5rem;
    width: 5rem;
    font-size: 1.5rem;
  }

  &:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-color: var(--color-border);
  }

  &.dial-button {
    grid-area: dial;
    background-color: var(--color-positive);
    border: none;

    &:hover {
      background-color: var(--green-call-hover);
    }

    .icon {
      height: 1.5rem;
      width: 1.5rem;
    }
  }

  &.backspace-button {
    grid-area: backspace;
    background-color: transparent;
    box-shadow: none;
    border: none;

    &:hover {
      .icon {
        color: var(--color-text);
      }
    }

    .icon {
      height: 1.5rem;
      width: 1.5rem;
      color: var(--color-text-subtle);
    }
  }
}

.devices-init-alert {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 0.5rem;
  font-size: 0.9rem;
  background-color: var(--bg-warning);
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius-sm);
  color: var(--text-warning);

  .link {
    color: var(--text-warning);
  }
}

.phone-call-rate {
  align-self: center;
  font-weight: 500;
  font-size: var(--text-sm);

  &.loading-state {
    color: var(--color-text-subtle);
    font-style: italic;
  }

  &.error-state {
    color: var(--error, #ef4444);
  }
}

.phone-call-options {
  grid-area: options;
  display: grid;
  grid-template: "alert settings" / auto fit-content(100px);
  gap: 0.5rem;

  .link {
    font-size: 0.9rem;
  }

  .link {
    grid-area: settings;
    cursor: pointer;
  }
}

.phone-call-settings {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  grid-area: settings;
  padding: 1rem 0 1.5rem;
  border-top: 1px solid var(--border-overlay);
  border-bottom: 1px solid var(--border-overlay);
  margin-bottom: 1.5rem;

  label {
    font-size: 0.9rem;
  }

  /* tablet */
  @media (min-width: 600px) {
    padding: 1.5rem 0 2rem;
  }
}

.active_phone_call {
  display: grid;
  grid-template:
    "a"
    "b" / auto;
  gap: 1rem;
  justify-items: center;

  padding: 1.5rem 1.5rem 3rem;
  background-color: var(--bg-overlay);
  border-radius: var(--border-radius);
  /* Shadow to bring it into evidence */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 450px;
}

.active_phone_call_info {
  text-align: center;
  display: grid;
  gap: 0.5rem;
}

.active_phone_call_indicators {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 50%;
}

.active_phone_call_output_volume {
  /* Volume indicator uses the box-shadow for UI response */
  box-shadow: 0 0 5px 5px var(--bg-green);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: var(--bg-elevated);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
}

.active_phone_call_controls {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* grid-template-rows: repeat(5, 1fr); */
  gap: 1rem;
  grid-template-areas: "a b c";
  justify-items: center;
}

.hangup-button {
  background-color: var(--error);
  color: var(--bg-overlay);
}

.active_phone_call_status {
  color: var(--text-light);
}

/* Other Styles */
.hide {
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
}

/* In-Call Dialpad Styles */
.in-call-dialpad {
  width: 100%;
}