:host {
  @apply flex flex-col relative;
}

.subtitle {
  @apply text-center text-regular my-6;
}

.bold {
  @apply font-bold mx-1;
}

ui-searchbox {
  @apply max-w-lg mx-auto w-full mt-12;

  input {
    caret-color: #f70400;
  }

  [uiSearchboxSearchButton] {
    @apply bg-white text-brand;

    &.hide {
      @apply bg-white;
    }

    .spin {
      @apply bg-white text-ucla-blue animate-spin;
    }
  }

  [uiSearchboxClearButton] {
    @apply text-inactive-customer;
  }
}

hr {
  @apply text-ucla-blue -ml-4;
  width: calc(100% + 2rem);
}

.branches {
  min-height: 600px;

  .branch {
    @apply flex flex-row justify-between items-center px-2 pt-6;
    padding-bottom: 19px;

    .branch-info {
      @apply flex flex-row;
      max-width: 485px;

      .branch-name {
        @apply font-bold whitespace-nowrap;
      }
      .branch-address {
        @apply ml-5 whitespace-nowrap overflow-hidden overflow-ellipsis;
      }
    }

    .branch-actions {
      @apply flex flex-row items-center;

      .cta-reserve {
        @apply absolute bg-transparent text-brand text-base font-bold border-none px-1 -mr-1;
        right: 85px;
      }
    }

    .branch-stock {
      @apply flex flex-row items-center font-bold;

      span {
        padding-top: 5px;
      }

      ui-icon {
        @apply text-ucla-blue mr-1;
      }
    }
  }
}

@media (min-width: 900px) {
  .branches {
    .branch {
      .branch-info {
        max-width: none;
      }
    }
  }
}
