// Component / Detail

.detail{
  --paddingLeft: var(--columnPaddingSmall);
  --paddingRight: var(--columnPaddingLarge);

  --titleFontSize: var(--titleFontSizeSmall);
  --titleLineHeight: var(--titleLineHeightMedium);

  --textFontSize: var(--textFontSizeMedium);
  --textLineHeight: var(--textLineHeightMedium);
 
  @include link;

  .header{
    @include gap(10px);
    padding:0 var(--paddingRight) 0 var(--paddingLeft);

    .icon{
      width:50px;
      height:50px;

      @include gap(10px);

      svg{
        width:100%;
        height:100%;

        path,
        rect,
        polygon,
        circle{
          fill:$blue;
        }
      }
    }

    .caption{
      color:var(--accent-title);
    }
    
    .title{
      color:var(--titleColor);
      font-size: var(--titleFontSize);
      line-height: var(--titleLineHeight);
      font-weight:600;
    }
  }

  .body,
  .footer{
    @include gap(12px, true);

    padding:0 var(--paddingRight) 0 var(--paddingLeft);
    color: var(--textColor);
    font-size: var(--textFontSize);
    line-height: var(--textLineHeight);

    a{
      font-weight:500;
      color:$blue;
      text-decoration:none;
    }
  }

  .footer{
    a{
      position:relative;

      &:hover{
        &:after{
          left:3px;
        }
      }

      &:after{
        content:'';
        transition-duration:0.2s;
        transition-property:all;
        transform-origin:center;
        transform:rotate(45deg);

        position:relative;
        left:0;
        top:-1px;
        margin-left:4px;

        display:inline-block;

        width:8px;
        height:8px;
        border-radius:1px;

        border-top:2px solid $blue;
        border-right:2px solid $blue;
      }
    }
  }
}

@include breakpoint($laptop-tablet){
  .detail{
    --paddingLeft: 0;

    --titleFontSize: var(--titleFontSizeXSmall);
    --titleLineHeight: var(--titleLineHeightXSmall);
  }
}
