@import '../../../../globals/variables';

.container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 320px;
  width: 100%;
}

/* HEADER */
.header {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.label-wrapper {
  align-items: center;
  display: flex;
  gap: 4px;
}

.label-icon {
  height: 16px;
  width: 16px;
}

.label-text {
  font-size: 0.875rem;
}

/* CLOSE BUTTON */
.close-button {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 2px;
}

.close-icon-url {
  height: 14px;
  width: 14px;
}

/* INPUT CONTAINER */
.input-container {
  border: 1px solid $ads-color-border;
  display: flex;
  transition: border 0.2s ease;
}

.input-wrapper {
  align-items: center;
  display: flex;
  gap: 6px;
  padding: 4px 8px;
  width: 100%;
}

.planet-icon {
  height: 16px;
  width: 16px;
}

.protocol {
  appearance: none;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
}

.divider {
  color: $ads-color-border;
}

.input-group {
  align-items: center;
  display: flex;
  flex: 1;
  gap: 4px;
}

.input-icon {
  height: 16px;
  width: 16px;
}

.input {
  background: transparent;
  border: none;
  flex: 1;
  font-size: inherit;
  outline: none;
}

/* COPY BUTTON */
.copy-button {
  align-items: center;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  font-size: 0.875rem;
  gap: 4px;
  padding: 2px 4px;
}

.copy-icon {
  height: 16px;
  width: 16px;
}

/* FOOTER */
.footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.hint-text {
  align-items: center;
  display: flex;
  font-size: 0.75rem;
  gap: 4px;
}

.hint-text.error {
  color: $ads-color-error;
}

.info-icon,
.standalone-info-icon {
  height: 14px;
  width: 14px;
}

/* VARIANTS */
.variant--default .input-container {
  border: 1px solid $ads-color-border;
}

.variant--focus .input-container {
  border: 1px solid $ads-color-focus;
  box-shadow: 0 0 0 1px $ads-color-focus;
}

.variant--error .input-container {
  border: 1px solid $ads-color-error;
}

.variant--disabled .input-container {
  background-color: $ads-color-background-disabled;
  border: 1px solid $ads-color-border;
  opacity: 0.6;
  pointer-events: none;
}

/* SIZES */
.size--small .input {
  font-size: 0.875rem;
}

.size--medium .input {
  font-size: 1rem;
}

.size--large .input {
  font-size: 1.125rem;
}

/* BORDER RADIUS */
.radius--none {
  border-radius: 0;
}

.radius--small {
  border-radius: 6px;
}

.radius--full {
  border-radius: 9999px;
}
