@import '../../../less/abstracts/theme.less';

#add-item-panel {

  form > .header {
    position: relative;
    border: 1px solid var(--input-border);
    border-bottom: none;
    background: var(--light-grey);
    -webkit-border-top-left-radius: 3px;
    -moz-border-top-left-radius: 3px;
    border-top-left-radius: 3px;
    -webkit-border-top-right-radius: 3px;
    -moz-border-top-right-radius: 3px;
    border-top-right-radius: 3px;
    z-index: 5;
  }

  form > .footer {
    position: relative;
    border: 1px solid var(--input-border);
    border-top: none;
    background: var(--light-grey);
    height: 110px;

    .btn-decorator {
      position: absolute;
      bottom: 0px;
      padding: 20px 30px;
      width: auto;
      border-top-right-radius: 10px;
      border: 1px solid var(--add-item-btn-decorator-border-color);
      background: var(--add-item-btn-decorator-bg-color);
      text-align: center;
      z-index: 10;

      input[type=checkbox] {
        width: auto;
        min-width: auto;
        margin-right: 0px;
      }
    }
  }

  .add-item-name {
    padding: 20px;

    label {
      position: relative;
      padding-bottom: 10px;
    }
  }

  .item-copy {
    position: relative;
    border: 1px solid var(--input-border);
    border-top: none;
    padding: 20px;
    background-color: var(--light-grey);

    p.description {
      font-size: var(--font-size-base);
      margin-top: 0;
    }

    .add-item-copy {
      position: relative;
      padding-left: 58px;

      /* This is needed because <s:textbox /> included YUI styles and we need to override this one */
      font-family: var(--font-family-sans) !important;

      input[type=radio] {
        display: none;
      }

      label {
        line-height: 48px;
        padding: 0 10px 0 0;
      }

      input {
        font-size: inherit;
      }

      .icon {
        left: 0;
        top: 0;
      }
    }
  }

  .add-item-name, .add-item-copy {
    .input-help {
      color: #666;
      font-style: italic;
      font-size: var(--font-size-sm);
      padding-top: 2px;
    }

    .input-validation-message {
      color: red;
      padding-top: 2px;
      font-weight: bold;
    }

    .input-message-disabled {
      display: none;
    }
  }


  .icon {
    position: absolute;
    left: 10px;
    top: 10px;
    height: 48px;
    width: 48px;
    background: var(--input-color);
    border: 1px solid #6699cc;
    border-radius: 50%;
    opacity: .9;

    img {
      position: relative;
    }
  }

  .icon:before {
    content: ' ';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 24px;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    background: #C0D8E2;
  }

  .default-icon {
    position: absolute;
    left: 10px;
    top: 10px;
    height: 48px;
    width: 48px;
    border-radius: 50%;
    text-align: center;
    line-height: 48px;
    font-weight: bold;
    font-size: 175%;
    color: #ffffff;
    text-shadow: rgba(0, 0, 0, 0.25) 0 -1px 1px;
    opacity: .75;

    .b {
      text-transform: lowercase;
    }
  }

  .c-D33833 {
    border: 1px solid #900;
    box-shadow:
      inset #900 0 0 1px,
      inset #fff 0 0 0 1px,
      0 5px 3px -2px rgba(0, 0, 0, 0.25),
      inset -5px -5px 10px 2px #903,
      inset -5px -10px 15px 14px #D33833
  }

  .c-6D6B6D {
    border: 1px solid #000;
    box-shadow:
      inset #333 0 0 1px,
      inset #fff 0 0 0 1px,
      0 5px 3px -2px rgba(0, 0, 0, 0.25),
      inset -5px -5px 10px 2px #222,
      inset -5px -10px 15px 14px #555
  }

  .c-335061 {
    border: 1px solid #356;
    box-shadow:
      inset #024 0 0 1px,
      inset #fff 0 0 0 1px,
      0 5px 3px -2px rgba(0, 0, 0, 0.25),
      inset -5px -5px 10px 2px #012,
      inset -5px -10px 15px 14px #335061
  }

  .c-49728B {
    border: 1px solid #036;
    box-shadow:
      inset #036 0 0 1px,
      inset #fff 0 0 0 1px,
      0 5px 3px -2px rgba(0, 0, 0, 0.25),
      inset -5px -5px 10px 2px #036,
      inset -5px -10px 15px 14px #49728B
  }

  .c-6699CC {
    border: 1px solid #6699cc;
    box-shadow:
      inset #003399 0 0 1px,
      inset #ffffff 0 0 0 1px,
      0 5px 3px -2px rgba(0, 0, 0, 0.25),
      inset -5px -5px 10px 2px #336699,
      inset -5px -10px 15px 14px #6699cc;
  }

  input {
    padding: 5px 10px;
    width: 50%;
    min-width: 300px;
  }

  .categories {
    border: 1px solid var(--input-border);
    background-color: var(--very-light-grey);

    .category {
      border-bottom: 1px solid var(--input-border);
      padding: 10px;

      .header {
        padding: 0 20px;

        h2 {
          margin: 0;
          padding: 15px 0 0;
        }

        p {
          margin-top: 5px;
        }
      }
    }

    .category:last-child {
      border-bottom: none;
    }
  }

  .categories.flat {
    .category {
      padding: 0 10px;
      border-bottom: none;

      .header {
        display: none;
      }
    }

    .category:first-child {
      padding: 10px 10px 0 10px;
    }

    .category:last-child {
      padding: 0 10px 10px 10px;
    }
  }

}

.j-item-options li, .j-item-options {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
}

.j-item-options {

  li:hover, li:focus {
    border-color: var(--input-border);
    background: var(--light-bg-color--hover);
    outline: 0;
  }

  li.active {
    cursor: text;
    background-color: var(--background);
    border-color: var(--input-border);
    box-shadow: inset 999rem 0 var(--background);
    -webkit-touch-callout: text;
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;

    .icon {
      opacity: 1
    }
  }

  li {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 3px;
    padding: 10px 10px 10px 68px;
    min-height: 68px;
    margin: 2px 0;

    label {
      display: block;
      font-size: var(--font-size-base);
      font-weight: bold;
      color: var(--text-color);
      padding-bottom: 5px;
      cursor: pointer;

      input {
        position: absolute;
        top: 24px;
        left: 25px;
        display: none;
      }
    }
  }
}
