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

#routes {
  margin: 0 1px 25px;
}

.route {
  @include pane;
  position: relative;
  margin: 14px 0;
  padding: 0;
  border-radius: $largeBorderRadius;
  background-color: $grey050;
  cursor: pointer;

  &:hover:after {
    position: absolute;
    top: 9px;
    @include right(5px);
    @include icon;
    content: 'edit';
    color: $linkColor;
  }

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

  .uri-container {
    position: relative;
    @include margin-right(20px);
    @include padding-right(10px);
    @include border-radius($largeBorderRadius, 0, 0, $largeBorderRadius);
    @include floatleft;
    color: $linkColor;
    background: $white;

    &:after {
      display: block;
      content: '.';
      text-indent: -100%;
      overflow: hidden;
      position: absolute;
      top: 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;
      @include margin(-1px, 8px, -1px, 0);
      border-radius: $smallBorderRadius;
      padding: 1px 5px;
      background: $grey050;
      box-shadow: inset 0 0 0 1px $hairlineColor;
      color: $mediumTextColor;
    }

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

  .template {
    color: $mediumTextColor;

    &:before {
      @include icon;
      @include margin(0, 5px, 0, 0);
      content: 'template';
    }
  }
}

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

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

    .uri {
      width: auto;
      cursor: text;

      .token {
        cursor: default;
      }
    }
  }

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

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

    .token {
      @include margin(5px, 5px, 0, 0);
      cursor: pointer;
    }
  }

  .delete {
    display: block;
    @include floatleft;
    margin-top: 7px;
    color: $red600;
  }
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5),
only screen and (min-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);
    }
  }
}