delivery-time {
  opacity: 0;
  visibility: hidden;
  transition: opacity 150ms ease;
  border-radius: var(--sp-2);
  display: block;

  @media screen and (max-width: 990px) {
    padding: var(--sp-4) var(--sp-1);
  }

  .delivery-time {
    .delivery-time__icon {
      padding: var(--sp-2d5);
      background-color: #f5f6f8;
      border-radius: 50%;
      display: flex;
      width: fit-content;
      margin-bottom: var(--sp-1d5);
      position: relative;

      img {
        max-width: 24px;
        aspect-ratio: 1/1;
      }
    }

    .delivery-time__divider {
      height: 2px;
      width: 15%;
      background-color: #f5f6f8;
      position: absolute;
      top: 22px;
      display: block;

      &.first {
        transform: translate(-50%, -50%);
        left: 33.33%;
      }

      &.second {
        transform: translate(50%, -50%);
        right: 33.33%;
      }
    }

    .delivery-time__items {
      display: flex;
      justify-content: space-between;
      position: relative;
      gap: var(--sp-5);

      .delivery-time__item {
        display: flex;
        flex-direction: column;
        flex: 1;
        align-items: center;

        .delivery-time__item-title,
        .today-title,
        .tomorrow-title {
          font-weight: 600;
          font-size: var(--text-xs);
          text-align: center;
          line-height: 1.33;
          color: rgb(var(--color-secondary-text));
        }

        .delivery-time__days-result {
          color: rgb(var(--color-secondary-text));
        }

        .delivery-time__item-subtitle {
          font-size: var(--text-xs);
        }
      }
    }
  }

  &.active {
    opacity: 1;
    visibility: visible;
  }

  .today-title,
  .tomorrow-title {
    display: none;
  }

  .today-title.active,
  .tomorrow-title.active {
    display: inline;
    text-align: center;
  }
}