@use '_theme.scss';

.address-item {
  .address-item-title {
    color: var(--text-color-ultra-dark);
    font-size: calc(var(--text-size-h4) * 1.2);
    margin-bottom: 0;

    @media (max-width: theme.$md) {
      font-size: var(--text-size-h4);
    }

    @media (max-width: theme.$sm) {
      width: 100%;
    }
  }

  .address-item-header {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 30px;

    @media (max-width: theme.$sm) {
      flex-wrap: wrap;
      gap: 20px;
    }
  }

  .address-item-export-import {
    display: flex;
    gap: 20px;
  }

  .address-item-new-button {
    margin-left: auto;
    height: 40px;

    span {
      line-height: 1;
    }

    @media (max-width: theme.$sm) {
      height: 35px;
    }
  }

  .address-item-body {
    margin-top: 30px;
    margin-bottom: 30px;
    display: grid;
    gap: 30px;
    width: 100%;
    max-width: 100%;

    @media (min-width: theme.$lg) {
      grid-template-columns: repeat(4, 1fr);
    }

    @media (min-width: theme.$md) and (max-width: theme.$lg) {
      grid-template-columns: repeat(2, 1fr);
    }

    @media (min-width: theme.$sm) and (max-width: theme.$md) {
      grid-template-columns: repeat(2, 1fr);
    }

    @media (max-width: theme.$sm) {
      grid-template-columns: 1fr;
      gap: 20px;
      margin-top: 20px;
      margin-bottom: 20px;
    }
  }

  .address-item-empty {
    margin: 0;
    font-size: var(--text-size-h4);
    color: var(--text-color-medium);
  }

  .address-item-body-empty {
    grid-template-columns: 1fr;
  }

  .address-item-expander-container {
    grid-column: 1 / -1;
    justify-content: center;
    display: flex;
  }

  .address-item-expander {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: var(--color-highlight);
    font-size: var(--text-size-label);
    cursor: pointer;
    gap: 5px;

    &:hover {
      opacity: 0.8;
    }

    .icon {
      margin-top: 2px;
    }
  }

  .address-item-delete-button {
    &:disabled {
      cursor: not-allowed;
      opacity: 0.5;
    }

    svg rect,
    svg path {
      stroke: var(--color-icon);
    }

    @media (max-width: theme.$sm) {
      display: none;
    }
  }

  .address-item-loading .loading-dot{
    background-color: var(--button-primary-background-color);
  }

  .address-item-export-button {
    &:disabled {
      cursor: not-allowed;
      opacity: 0.5;
    }

    svg g {
      fill: var(--color-icon);
    }
  }

  .address-item-import-button {
    svg g {
      fill: var(--color-icon);
    }
  }
}