@charset "UTF-8";
@import '@craftcms/sass/mixins';

#routes {
  margin-block: 0 25px;
  margin-inline: 1px;
}

.route {
  @include pane;
  position: relative;
  margin-block: 14px;
  margin-inline: 0;
  padding: 0;
  border-radius: var(--radius-lg);
  background-color: var(--gray-050);
  cursor: pointer;

  &:hover:not(.inactive)::after {
    position: absolute;
    inset-block-start: 9px;
    @include right(5px);
    @include icon;
    content: 'edit';
    color: var(--link-color);
  }

  &.inactive:hover {
    cursor: not-allowed;
  }

  .uri-container,
  .template {
    padding-block: 7px;
    padding-inline: 14px;
    line-height: 18px;
    min-height: 18px;
  }

  .uri-container {
    position: relative;
    margin-inline-end: 20px;
    padding-inline-end: 10px;
    border-start-start-radius: var(--radius-lg);
    border-start-end-radius: 0;
    border-end-end-radius: 0;
    border-end-start-radius: var(--radius-lg);
    float: inline-start;
    color: var(--link-color);
    background: var(--white);

    &::after {
      display: block;
      content: '';
      text-indent: -100%;
      overflow: hidden;
      position: absolute;
      inset-block-start: 0;
      @include right(-15px);
      width: 15px;
      height: 32px;
      background-repeat: no-repeat;

      body.ltr & {
        background-image: url('images/route-bg.png');
      }

      body.rtl & {
        background-image: url('images/route-bg_rtl.png');
      }
    }

    .site {
      display: inline-block;
      margin-inline: 0 8px;
      margin-block: -1px;
      border-radius: var(--radius-sm);
      padding-block: 1px;
      padding-inline: 5px;
      background: var(--gray-050);
      box-shadow: inset 0 0 0 1px var(--border-hairline);
      color: var(--fg-subtle);
    }

    .uri .token {
      margin-block: 0 -1px;
      margin-inline: 3px;
    }
  }

  .template {
    color: var(--fg-subtle);

    &::before {
      @include icon;
      margin-inline: 0 5px;
      margin-block: 0;
      content: 'template';
    }
  }
}

.route-settings {
  width: 500px;
  flex-direction: column;
  align-items: stretch;

  .body {
    height: calc(100% - 113px);
    overflow: auto;

    .uri {
      width: auto;
      cursor: text;
      padding-inline-start: 0;
      padding-block: 0;

      input[type='text'] {
        box-shadow: none;
        box-sizing: content-box;
        padding-block: 6px;

        &:first-child {
          padding-inline-start: 9px;
        }
      }

      .token {
        cursor: default;

        &:focus {
          box-shadow: var(--focus-ring);
        }
      }
    }
  }

  .uri-tokens {
    margin-block-start: 10px;
    border-radius: var(--radius-lg);
    padding-block: 15px;
    padding-inline: 25px;
    box-shadow: inset 0 1px 3px -1px darken($grey100, 10%);

    h4 {
      margin-block-end: 5px;
      text-align: center;
    }

    .token {
      margin-inline: 0 5px;
      margin-block: 5px 0;
      cursor: pointer;
    }
  }

  .delete {
    float: inline-start;
    color: var(--bg-disabled) !important;
  }
}

@media only screen and (resolution >= 1.5dppx) {
  .route .uri-container::after {
    background-size: 15px 32px;

    body.ltr & {
      background-image: url('images/route-bg_2x.png');
    }

    body.rtl & {
      background-image: url('images/route-bg_rtl_2x.png');
    }
  }
}
