@import "../_variables";
@import "../_mixins";

.custom-container {
  transition: color var(--t-color), border-color var(--t-color),
    background-color var(--t-color);

  .custom-container-title {
    font-weight: 600;
    &:not(:only-child) {
      margin-bottom: -0.4rem;
    }
  }

  &.info,
  &.tip,
  &.warning,
  &.danger {
    position: relative;
    padding: 0.1rem 1.5rem;
    border-left-width: 0.5rem;
    border-left-style: solid;
    margin: 1rem 0;
    background-color: var(--c-bg-lighter);

    & > svg {
      position: absolute;
      height: 22px;
      width: 22px;
      margin-left: -2.55rem;
      top: 0;
      margin-top: 1.6rem;
      border: 2px solid var(--c-bg);
      border-radius: 50%;
      z-index: 2;
    }

    &::after {
      content: "";
      position: absolute;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      margin-left: -2.45rem;
      top: 0;
      margin-top: 1.7rem;
      background: var(--c-bg);
    }
  }

  &.info {
    border-color: var(--c-info);
  }

  &.tip {
    border-color: var(--c-tip);

    .custom-container-title {
      color: var(--c-tip-title);
    }
  }

  &.warning {
    border-color: var(--c-warning);

    .custom-container-title {
      color: var(--c-warning-title);
    }
  }

  &.danger {
    border-color: var(--c-danger);

    .custom-container-title {
      color: var(--c-danger-title);
    }
  }

  &.details {
    display: block;
    position: relative;
    border-radius: 2px;
    margin: 1.6em 0;
    padding: 1.6em;
    background-color: var(--c-bg-lighter);

    h4 {
      margin-top: 0;
    }

    figure,
    p {
      &:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
      }
    }

    summary {
      outline: none;
      cursor: pointer;
    }
  }

  // linkcard

  &.link {
    position: relative;
    width: calc(45% - 52px);
    margin: 10px 0;
    border: 1px solid var(--c-border);
    border-radius: 10px;
    padding: 13px 30px 13px 20px;
    overflow: hidden;
    @include transition(all ease 0.3s);

    a {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      text-decoration: none;
    }

    .custom-container-title {
      color: var(--c-text-accent);
      margin-bottom: 2px;
      padding: 8px 0;
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
      white-space: nowrap;
    }

    .custom-container-description {
      p {
        font-size: 13px;
        margin: 0 0 10px 0;
        padding: 10px 0;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        overflow: hidden;
        line-height: 15px;
        &:first-child {
          border-top: 1px dashed #ddd;
          margin-top: 7px;
          padding-bottom: 0;
        }
        &:nth-child(2) {
          padding: 0;
        }
      }
      .custom-container-link-text {
        display: flex;
        align-items: center;
        color: var(--c-text-sub);
        svg{
          width: 12px;
          height: 12px;
        }
      }
    }

    .custom-container-identifier {
      box-sizing: border-box;
      width: 50px;
      height: 50px;
      border-radius: 100%;
      max-width: 100%;
      float: right;
      margin-top: 16px;
      margin-right: -15px;
    }
    svg.custom-container-identifier {
      padding: 10px;
      box-shadow: var(--box-shadow-inset);
    }
    img.custom-container-identifier {
      padding: 2px;
        box-shadow: inset 0 0 10px var(--c-text);
    }

    &:hover {
      border: 1px solid transparent;
      box-shadow: var(--box-shadow-hover);
      @include transform(translate(0px, -3px));
    }
  }
}

@media (max-width: $MQNarrow) {
  .custom-container.link {
    width: calc(70% - 52px);
  }
}

@media (max-width: $MQMobileNarrow) {
  .custom-container.link {
    width: calc(100% - 52px);
  }
}